/* ═══════════════════════════════════════════════════════════════════
   DESIGN TOKENS — fonte única de verdade para cores do projeto
   Altere aqui para mudar o tema de TODOS os apps (sistema, landing, cursos, meurpps)
   ═══════════════════════════════════════════════════════════════════ */

:root {
    /* Fonts */
    --font-heading: 'Cormorant Garamond', serif;
    --font-body:    'DM Sans', sans-serif;

    /* Backgrounds */
    --bg-deep:      #0F1115;
    --bg-surface:   #161B22;
    --bg-elevated:  #1F2933;

    /* Text */
    --text-primary:   #E6EDF3;
    --text-secondary: #8B949E;

    /* Borders */
    --border-color: #30363D;

    /* Accent (electric blue — default) */
    --accent:        #3B82F6;
    --accent-hover:  #60A5FA;
    --accent-active: #2563EB;
    --accent-deep:   #1D4ED8;
    --accent-glow:   rgba(59,130,246,.35);

    /* Data-viz / status */
    --color-blue:   #3B82F6;
    --color-green:  #22C55E;
    --color-cyan:   #06B6D4;
    --color-amber:  #F59E0B;
    --color-amber-text: var(--color-amber);
    --color-red:    #EF4444;
    --color-purple: #A78BFA;
    --color-gray:   #8B949E;

    /* Variantes suaves para barras de gráficos (data viz prolongada).
       Mistura 65% da cor base com 35% do bg-deep — preserva matiz, reduz
       saturação. Tema-aware automático: bg-deep muda, soft acompanha. */
    --color-blue-soft:   color-mix(in oklch, var(--color-blue)   65%, var(--bg-deep));
    --color-green-soft:  color-mix(in oklch, var(--color-green)  65%, var(--bg-deep));
    --color-cyan-soft:   color-mix(in oklch, var(--color-cyan)   65%, var(--bg-deep));
    --color-amber-soft:  color-mix(in oklch, var(--color-amber)  65%, var(--bg-deep));
    --color-red-soft:    color-mix(in oklch, var(--color-red)    65%, var(--bg-deep));
    --color-purple-soft: color-mix(in oklch, var(--color-purple) 65%, var(--bg-deep));
    --color-gray-soft:   color-mix(in oklch, var(--color-gray)   65%, var(--bg-deep));

    --badge-blue-text: #93C5FD;
    --badge-cyan-text: #67E8F9;
    --badge-purple-text: #C4B5FD;
    --badge-amber-text: #FCD34D;
    --badge-red-text: #FCA5A5;
    --badge-green-text: #86EFAC;
    --badge-gray-text: #CBD5E1;

    /* Layout */
    --maxw:    1180px;
    --radius:  24px;
    --shadow:     0 20px 60px rgba(0, 0, 0, 0.45);
    --shadow-sm:  0 4px 16px  rgba(0, 0, 0, 0.30);

    /* Legacy aliases */
    --brand-blue:      var(--accent);
    --brand-blue-dark: var(--accent-active);
    --footer-bg:       var(--bg-surface);
    --footer-text:     var(--text-primary);

    /* Mono font stack */
    --font-mono: ui-monospace, SFMono-Regular, "JetBrains Mono", Menlo, Consolas, monospace;

    /* Cor de texto que vai sobre o accent (botões primários, badges sólidos).
       O fundo sólido tem cor própria para garantir contraste com o branco. Apps com accent gold
       sobrescrevem para um navy escuro — branco em dourado é ilegível. */
    --text-on-accent: #FFFFFF;
    --accent-solid: #2563EB;
    --accent-solid-hover: #1D4ED8;
}

/* ═══════════════════════════════════════════════════════════════════
   LIGHT MODE — ativado com data-theme="light" no <html>
   Warm beige palette for a refined, paper-like feel
   ═══════════════════════════════════════════════════════════════════ */
[data-theme="light"] {
    --bg-deep:      #F5F0E8;
    --bg-surface:   #FDFBF7;
    --bg-elevated:  #FAF6EE;

    --text-primary:   #1B2A4A;
    --text-secondary: #596984;

    --border-color: #D8CFC0;

    --accent:        #2563EB;
    --accent-hover:  #1D4ED8;
    --accent-active: #1E40AF;
    --accent-deep:   #1E3A8A;
    --accent-glow:   rgba(37,99,235,.25);

    --color-blue:   #2563EB;
    --color-green:  #16A34A;
    --color-cyan:   #0891B2;
    /* Âmbar do tema claro escurecido (pedido de Jaguariúna, 06/10/2026): o #D97706
       ficava em 2,8:1 nas superfícies bege; o #B45309 dá cerca de 4,4:1, legível em
       borda, ícone e número grande. Texto corrido usa --color-amber-text (6,3:1). */
    --color-amber:  #B45309;
    --color-amber-text: #92400E;
    --color-red:    #DC2626;
    --color-purple: #7C3AED;
    --color-gray:   #6B7B9A;

    --badge-blue-text: #1D4ED8;
    --badge-cyan-text: #0E6378;
    --badge-purple-text: #6D28D9;
    --badge-amber-text: #874D0A;
    --badge-red-text: #B91C1C;
    --badge-green-text: #166534;
    --badge-gray-text: #475569;

    --footer-bg:    var(--bg-surface);
    --footer-text:  var(--text-primary);

    /* Sombras tintadas com navy (não preto) — combinam com a cena bege */
    --shadow:     0 16px 40px rgba(27, 42, 74, 0.12);
    --shadow-sm:  0 4px 14px  rgba(27, 42, 74, 0.08);
}

/* ═══════════════════════════════════════════════════════════════════
   PER-APP ACCENT OVERRIDES
   Apps that use gold accent instead of blue set data-app on <html>
   ═══════════════════════════════════════════════════════════════════ */
[data-app="cursos"],
[data-app="meurpps"] {
    --accent:           #C9A84C;
    --accent-hover:     #B8963E;
    --accent-active:    #A6842F;
    --accent-deep:      #8D6F22;
    --accent-glow:      rgba(201,168,76,.35);
    --text-on-accent:   #0F1923;
    --accent-solid: var(--accent);
    --accent-solid-hover: var(--accent-hover);
}

[data-theme="light"][data-app="cursos"],
[data-theme="light"][data-app="meurpps"] {
    --accent:           #C9A84C;
    --accent-hover:     #B8963E;
    --accent-active:    #A6842F;
    --accent-deep:      #8D6F22;
    --accent-glow:      rgba(201,168,76,.25);
    --text-on-accent:   #0F1923;
    --accent-solid: var(--accent);
    --accent-solid-hover: var(--accent-hover);
}