/* ============================================================
   design-system.css — Baú de Matrizes
   Único arquivo de variáveis CSS. Não contém regras visuais.
   Carregado primeiro, antes de qualquer outro arquivo do DS.
   ============================================================ */

:root {

    /* ----------------------------------------------------------
       CORES — Marca
    ---------------------------------------------------------- */
    --color-primary:       #fd7e14;
    --color-primary-hover: #e06c0d;
    --color-primary-light: #fff3e6;
    --color-primary-rgb:   253, 126, 20;

    --color-secondary:       #343a40;
    --color-secondary-hover: #23272b;

    /* ----------------------------------------------------------
       CORES — Semânticas (feedback de estado)
    ---------------------------------------------------------- */
    --color-success:       #198754;
    --color-success-light: #d1e7dd;
    --color-success-text:  #0f5132;

    --color-warning:       #f59e0b;
    --color-warning-light: #fff3cd;
    --color-warning-text:  #664d03;

    --color-error:         #dc3545;
    --color-error-light:   #f8d7da;
    --color-error-text:    #842029;

    --color-info:          #17a2b8;
    --color-info-light:    #cff4fc;
    --color-info-text:     #055160;

    /* ----------------------------------------------------------
       CORES — Neutras (escala de cinza)
    ---------------------------------------------------------- */
    --color-white:       #ffffff;
    --color-neutral-50:  #fafbfc;
    --color-neutral-100: #f8f9fa;
    --color-neutral-200: #e9ecef;
    --color-neutral-300: #dee2e6;
    --color-neutral-400: #ced4da;
    --color-neutral-500: #6b7280;
    --color-neutral-600: #495057;
    --color-neutral-700: #343a40;
    --color-neutral-800: #212529;
    --color-neutral-900: #111827;

    /* ----------------------------------------------------------
       CORES — Texto
    ---------------------------------------------------------- */
    --color-text-primary:   #212529;
    --color-text-secondary: #343a40;
    --color-text-muted:     #6b7280;
    --color-text-inverted:  #ffffff;
    --color-text-link:      #fd7e14;

    /* ----------------------------------------------------------
       CORES — Fundo
    ---------------------------------------------------------- */
    --color-bg-body:   #ffffff;
    --color-bg-subtle: #f8f9fa;
    --color-bg-muted:  #f3f4f6;
    --color-bg-dark:   #343a40;

    /* ----------------------------------------------------------
       CORES — Borda
    ---------------------------------------------------------- */
    --color-border:        #e9ecef;
    --color-border-strong: #dee2e6;
    --color-border-focus:  rgba(253, 126, 20, 0.35);

    /* ----------------------------------------------------------
       TIPOGRAFIA — Família
    ---------------------------------------------------------- */
    --font-family-base: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --font-family-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;

    /* ----------------------------------------------------------
       TIPOGRAFIA — Escala (base 16px)
    ---------------------------------------------------------- */
    --font-size-xs:   0.75rem;   /*  12px */
    --font-size-sm:   0.875rem;  /*  14px */
    --font-size-base: 1rem;      /*  16px */
    --font-size-lg:   1.125rem;  /*  18px */
    --font-size-xl:   1.25rem;   /*  20px */
    --font-size-2xl:  1.5rem;    /*  24px */
    --font-size-3xl:  1.875rem;  /*  30px */
    --font-size-4xl:  2.25rem;   /*  36px */

    /* ----------------------------------------------------------
       TIPOGRAFIA — Peso
    ---------------------------------------------------------- */
    --font-weight-light:    300;
    --font-weight-normal:   400;
    --font-weight-medium:   500;
    --font-weight-semibold: 600;
    --font-weight-bold:     700;

    /* ----------------------------------------------------------
       TIPOGRAFIA — Altura de linha
    ---------------------------------------------------------- */
    --line-height-tight:   1.25;
    --line-height-base:    1.5;
    --line-height-relaxed: 1.75;

    /* ----------------------------------------------------------
       ESPAÇAMENTO — múltiplos de 8px
    ---------------------------------------------------------- */
    --spacing-xs:  0.25rem;  /*  4px */
    --spacing-sm:  0.5rem;   /*  8px */
    --spacing-md:  1rem;     /* 16px */
    --spacing-lg:  1.5rem;   /* 24px */
    --spacing-xl:  2rem;     /* 32px */
    --spacing-2xl: 3rem;     /* 48px */
    --spacing-3xl: 4rem;     /* 64px */

    /* ----------------------------------------------------------
       BORDAS — Raio
    ---------------------------------------------------------- */
    --radius-sm:   4px;
    --radius-md:   8px;
    --radius-lg:   12px;
    --radius-xl:   16px;
    --radius-full: 9999px;

    /* ----------------------------------------------------------
       SOMBRAS
    ---------------------------------------------------------- */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
    --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.15);

    /* ----------------------------------------------------------
       TRANSIÇÕES
    ---------------------------------------------------------- */
    --transition-fast: 0.15s ease;
    --transition-base: 0.2s ease;
    --transition-slow: 0.3s ease;

    /* ----------------------------------------------------------
       Z-INDEX — escala consistente
    ---------------------------------------------------------- */
    --z-dropdown:     1000;
    --z-sticky:       1020;
    --z-navbar:       1030;
    --z-modal:        1050;
    --z-notification: 9999;

    /* ----------------------------------------------------------
       BREAKPOINTS — referência (use em media queries abaixo)
       Valores idênticos ao Bootstrap 5 para compatibilidade.
    ---------------------------------------------------------- */
    /* --bp-sm: 576px  */
    /* --bp-md: 768px  */
    /* --bp-lg: 992px  */
    /* --bp-xl: 1200px */

    /* ----------------------------------------------------------
       ALIASES — compatibilidade com código existente
       Mapeiam --cor-* → --color-* para não quebrar nada durante
       a migração. Remover após migração completa de todas as páginas.
    ---------------------------------------------------------- */
    --cor-primaria:       var(--color-primary);
    --cor-primaria-hover: var(--color-primary-hover);
    --cor-secundaria:     var(--color-secondary);
    --cor-texto:          var(--color-text-primary);
    --cor-titulo:         var(--color-text-secondary);
    --cor-fundo:          var(--color-bg-body);
    --cor-borda:          var(--color-border);
    --cor-link:           var(--color-text-link);
    --cor-texto-btn:      var(--color-text-inverted);
}

/* ----------------------------------------------------------
   DARK MODE — [data-theme="dark"] no elemento <html>
   Aplicado via dark-mode.js (híbrido: localStorage + prefers-color-scheme).
   Apenas os tokens que mudam precisam ser redeclarados aqui.
---------------------------------------------------------- */
[data-theme="dark"] {

    /* Fundos */
    --color-bg-body:   #121212;
    --color-bg-subtle: #1e1e1e;
    --color-bg-muted:  #2a2a2a;
    --color-bg-dark:   #0d0d0d;

    /* Texto */
    --color-text-primary:   #e9ecef;
    --color-text-secondary: #ced4da;
    --color-text-muted:     #9ca3af;
    /* --color-text-inverted e --color-text-link mantêm-se iguais */

    /* Bordas */
    --color-border:        #2d3748;
    --color-border-strong: #374151;

    /* Laranja — tom claro invertido para superfície escura */
    --color-primary-light: #2d1f0a;

    /* Semânticas — variantes light/text invertidas para fundos escuros */
    --color-success-light: #0a2e1a;
    --color-success-text:  #6fcf97;

    --color-warning-light: #2e2000;
    --color-warning-text:  #f59e0b;

    --color-error-light:   #2e0a0a;
    --color-error-text:    #ef9a9a;

    --color-info-light:    #0a1e2e;
    --color-info-text:     #64b5f6;

    /* Sombras — mais fortes em fundo escuro para manter profundidade */
    --shadow-sm: 0 1px 2px  rgba(0, 0, 0, 0.40);
    --shadow-md: 0 4px 8px  rgba(0, 0, 0, 0.50);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.60);
    --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.70);
}