/*
FILE: app/static/css/theme.css
PURPOSE: Colour palette (v3 "Graphite + Azure/Mint") + dark/light switching.
         The single source of truth for colours: every other stylesheet reads
         these variables. Loaded after style.css/components.css so it wins.
BATCH: v3 (2026-10-21 theme overhaul)

PALETTE
  Dark (default): near-black graphite surfaces, azure primary, mint accent.
  Light: soft grey-blue surfaces (never pure white pages), deeper azure so
         white button text and primary-coloured text both pass WCAG AA.
CONTRAST (checked with a Playwright audit of every page, both modes):
  text-primary / text-secondary / text-muted on background, surface and
  card are >= 4.5:1. Use --primary for coloured TEXT and accents and
  --primary-strong for FILLED backgrounds under white text (in dark mode no
  single blue can do both).

ALSO REDEFINED HERE: the Tailwind-layer variables from tailwind-input.css
(--bg-*, --brand-*, --border-hover, --gradient-*), so legacy Tailwind pages
follow the same palette.

TROUBLESHOOTING
  - Text invisible in one mode: a rule uses a literal colour. Use
    var(--text-*) or var(--on-primary) instead.
*/

/* ============================================
   DARK MODE (DEFAULT)
   ============================================ */
:root,
html[data-theme="dark"] {
    color-scheme: dark;

    /* Brand */
    --primary:        #4A85FF;   /* azure accent; as text >= 5:1 on every dark surface */
    --primary-strong: #2563EB;   /* FILLED backgrounds under white text (5.2:1) */
    --primary-dark:   #1D4ED8;   /* hover of filled buttons (6.7:1) */
    --primary-light:  #7AA5FF;   /* softer primary-coloured text on dark surfaces */
    --secondary:      #19C9A3;   /* mint */
    --secondary-dark: #10A585;
    --on-primary:     #FFFFFF;

    /* Surfaces: graphite, slightly cool */
    --background:           #07080B;
    --background-secondary: #0B0D11;
    --surface:              #101318;
    --surface-hover:        #161A21;
    --surface-raised:       #13161C;

    /* Text */
    --text-primary:   #ECEEF3;
    --text-secondary: #A7AEBC;
    --text-muted:     #7D8595;

    /* Borders */
    --border:       #1E232C;
    --border-light: #2A303B;

    /* Semantic */
    --success:      #2BD47D;
    --success-dark: #1DA862;
    --warning:      #F5B13D;
    --warning-dark: #D8921A;
    --danger:       #FF6B6B;
    --danger-dark:  #E04848;
    --info:         #4C8DFF;
    --info-dark:    #2F6BFF;

    /* Gradients */
    --gradient-primary:   linear-gradient(135deg, #2F6BFF 0%, #19C9A3 100%);
    --gradient-secondary: linear-gradient(135deg, #19C9A3 0%, #2F6BFF 100%);

    /* Shadows */
    --shadow:       0 6px 24px rgba(0, 0, 0, 0.45);
    --shadow-hover: 0 10px 40px rgba(47, 107, 255, 0.18);

    /* Fonts */
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-display: 'Space Grotesk', 'Inter', sans-serif;
    --font-mono:   'JetBrains Mono', 'Fira Code', 'Courier New', monospace;

    /* Radii, transitions */
    --radius:    12px;
    --radius-lg: 18px;
    --radius-sm: 8px;
    --transition: 0.25s ease;
    --transition-slow: 0.45s ease;

    /* Tailwind-layer aliases (tailwind-input.css) */
    --bg-primary:   var(--background);
    --bg-secondary: var(--background-secondary);
    --bg-tertiary:  var(--surface);
    --bg-elevated:  var(--surface-hover);
    --brand-blue:   #2F6BFF;
    --brand-purple: #2F6BFF;
    --brand-violet: #1F55E0;
    --brand-cyan:   #19C9A3;
    --brand-pink:   #19C9A3;
    --brand-green:  #2BD47D;
    --border-hover: var(--border-light);
    --gradient-brand: var(--gradient-primary);
    --gradient-glow:  var(--gradient-primary);

    /* Icon accents (sidebar). Each is >= 4.5:1 on --background-secondary */
    --ic-blue:   #6EA0FF;
    --ic-mint:   #2DD4BF;
    --ic-violet: #B79CFF;
    --ic-amber:  #F5B13D;
    --ic-rose:   #FF8197;
    --ic-sky:    #4FC3F7;
    --ic-green:  #4ADE80;
    --ic-orange: #FF9F5A;
}

/* ============================================
   LIGHT MODE — soft slate, low-glare (v3.10: dimmer surfaces, no near-white)
   ============================================ */
html[data-theme="light"] {
    color-scheme: light;

    /* v3.20: softer (less bright) light theme. Every text and accent colour is
       >= 4.5:1 on the darkest surface (--background-secondary #B9C0CB); body text 10.3:1 */
    --ic-blue:   #1A42A5;
    --ic-mint:   #065446;
    --ic-violet: #5236B2;
    --ic-amber:  #724400;
    --ic-rose:   #8D1E32;
    --ic-sky:    #015070;
    --ic-green:  #12592F;
    --ic-orange: #7D350C;

    --primary:        #1B45AC;   /* white text 7.1:1, as text on the page 5.0:1 */
    --primary-strong: #1B45AC;
    --primary-dark:   #163A90;
    --primary-light:  #1B45AC;
    --secondary:      #045849;
    --secondary-dark: #03463A;
    --on-primary:     #FFFFFF;

    --background:           #C3C9D3;
    --background-secondary: #B9C0CB;
    --surface:              #CDD2DB;
    --surface-hover:        #C5CBD4;
    --surface-raised:       #D2D7DF;

    --text-primary:   #0D1117;
    --text-secondary: #252D3A;
    --text-muted:     #384151;

    --border:       #A9B2BF;
    --border-light: #96A0B0;

    --success:      #08582F;
    --success-dark: #064A27;
    --warning:      #6E3F00;
    --warning-dark: #5F3600;
    --danger:       #961D1D;
    --danger-dark:  #7E1818;
    --info:         #1B45AC;
    --info-dark:    #163A90;

    --gradient-primary:   linear-gradient(135deg, #1B45AC 0%, #045849 100%);
    --gradient-secondary: linear-gradient(135deg, #045849 0%, #1B45AC 100%);

    --shadow:       0 6px 22px rgba(17, 21, 28, 0.08);
    --shadow-hover: 0 10px 36px rgba(34, 87, 219, 0.14);

    --brand-blue:   #2257DB;
    --brand-purple: #2257DB;
    --brand-violet: #1A45B3;
    --brand-cyan:   #0B8C71;
    --brand-pink:   #0B8C71;
    --brand-green:  #12804A;
}

/* Every page gets an explicit background + text colour */
html, body { background-color: var(--background); color: var(--text-primary); }

/* ============================================
   HEADINGS — Space Grotesk
   ============================================ */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    letter-spacing: -0.02em;
}

/* ============================================
   SMOOTH THEME SWITCHING
   ============================================ */
html.theme-transition *,
html.theme-transition *::before,
html.theme-transition *::after {
    transition: background-color 0.3s ease,
                color 0.3s ease,
                border-color 0.3s ease !important;
}

/* ============================================
   LIGHT MODE — legacy components with dark translucent backgrounds
   ============================================ */
html[data-theme="light"] .dropdown-menu,
html[data-theme="light"] .lang-dropdown,
html[data-theme="light"] .mobile-login-dropdown {
    background: var(--surface-raised);
    box-shadow: 0 20px 60px rgba(17, 21, 28, 0.12);
}
html[data-theme="light"] .flash-container .alert { background: var(--surface-raised); }
html[data-theme="light"] .project-description-content pre,
html[data-theme="light"] .project-description-content code {
    background: var(--background-secondary);
    color: var(--text-primary);
}
/* Text shadows are unreadable on light surfaces */
html[data-theme="light"] [style*="text-shadow"] { text-shadow: none !important; }

/* ============================================
   THEME TOGGLE (icon swap)
   ============================================ */
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: inline-block; }
html[data-theme="light"] .theme-toggle .icon-sun { display: inline-block; }
html[data-theme="light"] .theme-toggle .icon-moon { display: none; }

/* ============================================
   PRINT — always light
   ============================================ */
@media print {
    :root,
    html[data-theme="light"],
    html[data-theme="dark"] {
        --background: #FFFFFF;
        --background-secondary: #F8FAFC;
        --surface: #FFFFFF;
        --text-primary: #000000;
        --text-secondary: #333333;
        --border: #DDDDDD;
    }
}

@media (prefers-reduced-motion: reduce) {
    html.theme-transition * { transition: none !important; }
}

/* END OF FILE */