/* ==========================================================================
   Data CFC — Design Tokens (fonte única de verdade)
   ⚠️  Nenhum hex literal fora deste arquivo. Sempre use var(--ds-*).
   ========================================================================== */

/* ---------- 1. CORES — MARCA ------------------------------------------- */
:root {
    --ds-brand-primary:  #ff6600;   /* Laranja CFC — CTAs, destaques */
    --ds-brand-hover:    #e65c00;   /* Hover do primary */
    --ds-brand-midnight: #191970;   /* Navy — títulos, headers premium */
    --ds-brand-midnight-light: #2430a0; /* Gradient top do navy */
}

/* ---------- 2. CORES — SUPERFÍCIES (light) ------------------------------ */
:root {
    --ds-bg:             #ffffff;
    --ds-bg-alt:         #f8fafc;
    --ds-bg-elevated:    #ffffff;
    --ds-bg-inset:       #f1f5f9;   /* Fundo de inputs, filtros */
    --ds-header-bg:      #ffffff;
}

/* ---------- 2b. SUPERFÍCIES (dark) -------------------------------------- */
html[data-theme="dark"] {
    --ds-bg:             #121212;
    --ds-bg-alt:         #191919;
    --ds-bg-elevated:    #202020;
    --ds-bg-inset:       #171717;
    --ds-header-bg:      #141414;
}

/* ---------- 3. CORES — TEXTO -------------------------------------------- */
:root {
    --ds-ink:            #0f172a;   /* Texto forte (headings) */
    --ds-ink-body:       #191970;   /* Corpo - navy em light */
    --ds-ink-muted:      #64748b;   /* Labels, captions */
    --ds-ink-faint:      #94a3b8;   /* Placeholders */
}

html[data-theme="dark"] {
    --ds-ink:            #f8fafc;
    --ds-ink-body:       #e8edf5;
    --ds-ink-muted:      #a1a1aa;
    --ds-ink-faint:      #71717a;
}

/* ---------- 4. CORES — BORDAS & SOMBRAS -------------------------------- */
:root {
    --ds-border:         #e2e8f0;
    --ds-shadow-soft:    rgba(0, 0, 0, 0.02);
    --ds-shadow-md:      0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(15, 23, 42, 0.06);
    --ds-shadow-lg:      0 2px 4px rgba(15, 23, 42, 0.06), 0 12px 28px rgba(25, 25, 112, 0.1);
    --ds-hover-surface:  #f8fafc;
}

html[data-theme="dark"] {
    --ds-border:         #343434;
    --ds-shadow-soft:    rgba(0, 0, 0, 0.35);
    --ds-shadow-md:      0 1px 2px rgba(0, 0, 0, 0.2), 0 8px 24px rgba(0, 0, 0, 0.25);
    --ds-shadow-lg:      0 2px 6px rgba(0, 0, 0, 0.3), 0 14px 32px rgba(0, 0, 0, 0.35);
    --ds-hover-surface:  #292929;
}

/* ---------- 5. CORES — SEMÂNTICAS --------------------------------------- */
:root {
    --ds-success:        #009c3b;   /* Verde bandeira — EV+, positivo */
    --ds-success-vivid:  #00e676;   /* Verde para valores numéricos */
    --ds-success-text:   #009c3b;
    --ds-warning:        #fed900;   /* Amarelo — dúvida, atenção */
    --ds-warning-text:   #f59e0b;
    --ds-danger:         #ee2e31;   /* Vermelho — risco, negativo */
    --ds-danger-text:    #ef4444;
    --ds-info:           #38bdf8;   /* Cyan — dados, espacial */
    --ds-info-text:      #38bdf8;
    --ds-field-green:    #064e3b;   /* legado — gramado antigo */
    --ds-pitch-fm:       #0b1224;   /* Campinho FM/Wyscout — charcoal navy */
    --ds-pitch-grass:    #2f7a3a;   /* Gramado Volt (Meu Time / Mapa / Prováveis) */
    --ds-pitch-line:     #ffffff;   /* Linhas do campinho FM */
}

html[data-theme="dark"] {
    --ds-success-text:   #34d399;
    --ds-warning-text:   #fbbf24;
    --ds-danger-text:    #f87171;
    --ds-info-text:      #7dd3fc;
}

/* ---------- 6. TIPOGRAFIA ----------------------------------------------- */
:root {
    --ds-font-sans:      'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --ds-font-mono:      'IBM Plex Mono', 'Fira Code', monospace;
    --ds-font-display:   'Championship', var(--ds-font-sans);

    /* Escala modular (major-third ~1.25) */
    --ds-text-2xs:       0.625rem;  /* 10px */
    --ds-text-xs:        0.6875rem; /* 11px */
    --ds-text-sm:        0.75rem;   /* 12px */
    --ds-text-base:      0.8125rem; /* 13px */
    --ds-text-md:        0.875rem;  /* 14px */
    --ds-text-lg:        1rem;      /* 16px */
    --ds-text-xl:        1.25rem;   /* 20px */
    --ds-text-2xl:       1.5rem;    /* 24px */
    --ds-text-3xl:       2rem;      /* 32px */
    --ds-text-4xl:       2.625rem;  /* 42px */

    --ds-leading-tight:  1.15;
    --ds-leading-normal: 1.45;
    --ds-leading-relaxed: 1.65;

    --ds-weight-normal:  400;
    --ds-weight-medium:  500;
    --ds-weight-semi:    600;
    --ds-weight-bold:    700;
    --ds-weight-heavy:   800;
    --ds-weight-black:   900;
}

/* ---------- 7. ESPAÇAMENTO (4px base grid) ------------------------------ */
:root {
    --ds-space-0:   0;
    --ds-space-1:   4px;
    --ds-space-2:   8px;
    --ds-space-3:   12px;
    --ds-space-4:   16px;
    --ds-space-5:   20px;
    --ds-space-6:   24px;
    --ds-space-8:   32px;
    --ds-space-10:  40px;
    --ds-space-12:  48px;
    --ds-space-16:  64px;
    --ds-space-20:  80px;
}

/* ---------- 8. RADIUS --------------------------------------------------- */
:root {
    --ds-radius-xs:   4px;
    --ds-radius-sm:   8px;
    --ds-radius-md:   12px;
    --ds-radius-lg:   16px;
    --ds-radius-xl:   20px;
    --ds-radius-pill:  999px;
    --ds-radius-chip:  10px;
}

/* ---------- 9. TRANSIÇÕES / MOTION -------------------------------------- */
:root {
    --ds-duration-fast:  0.12s;
    --ds-duration:       0.2s;
    --ds-duration-slow:  0.4s;
    --ds-ease-default:   0.2s ease;
    --ds-ease-spring:    0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --ds-duration-fast:  0.01s;
        --ds-duration:       0.01s;
        --ds-duration-slow:  0.01s;
        --ds-ease-default:   0.01s linear;
        --ds-ease-spring:    0.01s linear;
    }
}

/* ---------- 10. Z-INDEX ------------------------------------------------- */
:root {
    --ds-z-dropdown:   100;
    --ds-z-sticky:     200;
    --ds-z-overlay:    500;
    --ds-z-modal:      1000;
    --ds-z-header:     1050;
    --ds-z-toast:      1100;
}

/* ---------- 11. SCROLLBAR ----------------------------------------------- */
:root {
    --ds-scrollbar-track:       #f1f5f9;
    --ds-scrollbar-thumb:       #cbd5e1;
    --ds-scrollbar-thumb-hover: var(--ds-brand-primary);
}

html[data-theme="dark"] {
    --ds-scrollbar-track:       #181818;
    --ds-scrollbar-thumb:       #454545;
}

/* ---------- 12. HUB (Sala de Estudos) ----------------------------------- */
:root {
    --ds-hub-surface:        linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    --ds-hub-surface-card:   linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    --ds-hub-surface-navy:   linear-gradient(180deg, #2430a0 0%, #191970 100%);
}

html[data-theme="dark"] {
    --ds-hub-surface:        linear-gradient(180deg, #202020 0%, #171717 100%);
    --ds-hub-surface-card:   linear-gradient(180deg, #232323 0%, #181818 100%);
    --ds-hub-surface-navy:   linear-gradient(180deg, #242424 0%, #151515 100%);
}

/* ---------- 13. COMPONENTES --------------------------------------------- */
:root {
    --ds-focus-ring:         0 0 0 3px rgba(255, 102, 0, 0.35);
    --ds-btn-height:         40px;
    --ds-btn-height-sm:      32px;
    --ds-btn-height-lg:      48px;
    --ds-btn-pad-x:          18px;
    --ds-btn-pad-x-sm:       12px;
    --ds-btn-pad-x-lg:       22px;
    --ds-btn-radius:         var(--ds-radius-sm);
    --ds-btn-font:           var(--ds-text-sm);
    --ds-btn-weight:         var(--ds-weight-heavy);
    --ds-btn-tracking:       0.04em;

    --ds-pill-height:        32px;
    --ds-pill-pad-x:         14px;
    --ds-pill-radius:        var(--ds-radius-sm);
    --ds-pill-font:          var(--ds-text-xs);
    --ds-pill-gap:           var(--ds-space-2);

    --ds-tab-height:         34px;
    --ds-tab-gap:            var(--ds-space-2);
    --ds-tab-pad-x:          14px;

    --ds-card-pad:           var(--ds-space-5);
    --ds-card-radius:        var(--ds-radius-md);
    --ds-card-border:        1px solid var(--ds-border);
}