/**
 * design-tokens.css — Fonte Canônica de Tokens da Plataforma P8W
 *
 * Camada 1 da arquitetura CSS (carregado primeiro).
 * TODAS as cores, espaçamentos, tipografia e sombras devem vir daqui.
 * ❌ Proibido hardcodar valores diretamente no HTML ou em outros CSS.
 *
 * Ordem de carregamento:
 *   1. design-tokens.css     ← este arquivo
 *   2. app.css
 *   3. components/header.css
 *   4. components.css
 *   5. ui-system.css
 *   6. unified-components.css
 *   7. admin-components.css
 *   8. responsive-accessibility-fixes.css
 */

/* ============================================================
   TOKENS — LIGHT MODE (padrão)
   ============================================================ */
:root {
    /* --- Paleta de cores primária (brand) ------------------- */
    --color-primary-50:  #F0F9FF;
    --color-primary-100: #E0F2FE;
    --color-primary-200: #BAE6FD;
    --color-primary-300: #7DD3FC;
    --color-primary-400: #38BDF8;
    --color-primary-500: #0EA5E9;
    --color-primary-600: #0284C7;
    --color-primary-700: #0369A1;
    --color-primary-800: #075985;
    --color-primary-900: #0C4A6E;

    /* --- Paleta secundária (accent) ------------------------- */
    --color-secondary-50:  #F7FEE7;
    --color-secondary-100: #ECFCCB;
    --color-secondary-200: #D9F99D;
    --color-secondary-300: #BEF264;
    --color-secondary-400: #A3E635;
    --color-secondary-500: #84CC16;
    --color-secondary-600: #65A30D;
    --color-secondary-700: #4D7C0F;
    --color-secondary-800: #3F6212;
    --color-secondary-900: #365314;

    /* --- Semânticas (status) -------------------------------- */
    --color-success-50:  #F0FDF4;
    --color-success-100: #DCFCE7;
    --color-success-500: #22C55E;
    --color-success-600: #16A34A;
    --color-success-700: #15803D;

    --color-warning-50:  #FFFBEB;
    --color-warning-100: #FEF3C7;
    --color-warning-500: #F59E0B;
    --color-warning-600: #D97706;
    --color-warning-700: #92400E;

    --color-danger-50:   #FEF2F2;
    --color-danger-100:  #FEE2E2;
    --color-danger-500:  #EF4444;
    --color-danger-600:  #DC2626;
    --color-danger-700:  #991B1B;

    --color-info-50:  #F0F9FF;
    --color-info-500: #0EA5E9;
    --color-info-700: #0369A1;

    /* --- Paleta neutra (Slate) ------------------------------ */
    --color-gray-50:  #F8FAFC;
    --color-gray-100: #F1F5F9;
    --color-gray-200: #E2E8F0;
    --color-gray-300: #CBD5E1;
    --color-gray-400: #94A3B8;
    --color-gray-500: #64748B;
    --color-gray-600: #475569;
    --color-gray-700: #334155;
    --color-gray-800: #1E293B;
    --color-gray-900: #0F172A;
    --color-gray-950: #020617;

    /* --- Superfícies (semânticas light) --------------------- */
    --surface-page:     var(--color-gray-100);
    --surface-card:     #FFFFFF;
    --surface-raised:   #FFFFFF;
    --surface-sunken:   var(--color-gray-50);
    --surface-overlay:  rgba(15, 23, 42, 0.55);

    /* --- Texto (semântico) ---------------------------------- */
    --text-primary:     var(--color-gray-900);
    --text-secondary:   var(--color-gray-600);
    --text-muted:       var(--color-gray-400);
    --text-placeholder: var(--color-gray-300);
    --text-inverse:     #FFFFFF;
    --text-link:        var(--color-primary-500);
    --text-link-hover:  var(--color-primary-600);

    /* --- Brand (padrão substituível via DB/tenant) ----------- */
    --brand-primary:       var(--color-primary-500);
    --brand-primary-d:     var(--color-primary-600);
    --brand-primary-l:     var(--color-primary-400);
    --brand-secondary:     var(--color-secondary-500);
    --brand-secondary-d:   var(--color-secondary-600);
    --brand-gradient:      linear-gradient(135deg, var(--color-primary-500) 0%, var(--color-secondary-500) 100%);
    --brand-gradient-r:    linear-gradient(135deg, var(--color-secondary-500) 0%, var(--color-primary-500) 100%);

    /* --- Aliases semânticos de cor (usados em componentes) --- */
    --color-success:       var(--color-success-500);
    --color-warning:       var(--color-warning-500);
    --color-danger:        var(--color-danger-500);
    --color-info:          var(--color-info-500);
    --border-subtle:       var(--color-gray-200);

    /* --- Backgrounds semânticos de status -------------------- */
    --color-success-bg:    var(--color-success-50);
    --color-success-text:  var(--color-success-700);
    --color-warning-bg:    var(--color-warning-50);
    --color-warning-text:  var(--color-warning-700);
    --color-danger-bg:     var(--color-danger-50);
    --color-danger-text:   var(--color-danger-700);
    --color-info-bg:       var(--color-info-50);
    --color-info-text:     var(--color-info-700);
    --color-primary-subtle: rgba(14, 165, 233, 0.08);
    --color-secondary-subtle: rgba(132, 204, 22, 0.08);

    /* --- Hero gradients -------------------------------------- */
    --gradient-hero:       linear-gradient(135deg, var(--color-gray-900) 0%, var(--color-gray-800) 60%, #0f2d44 100%);
    --gradient-hero-overlay: linear-gradient(135deg, rgba(15,23,42,.85) 0%, rgba(15,23,42,.70) 50%, rgba(15,23,42,.55) 100%);

    /* --- Bordas -------------------------------------------- */
    --border-color:        var(--color-gray-200);
    --border-color-strong: var(--color-gray-300);
    --border-focus:        var(--color-primary-500);

    /* --- Sombras (premium, sutis) --------------------------- */
    --shadow-xs:  0 1px 2px 0 rgba(15, 23, 42, 0.04);
    --shadow-sm:  0 1px 3px 0 rgba(15, 23, 42, 0.07), 0 1px 2px -1px rgba(15, 23, 42, 0.05);
    --shadow-md:  0 4px 6px -1px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.05);
    --shadow-lg:  0 10px 20px -4px rgba(15, 23, 42, 0.10), 0 4px 8px -4px rgba(15, 23, 42, 0.06);
    --shadow-xl:  0 20px 40px -8px rgba(15, 23, 42, 0.14), 0 8px 16px -8px rgba(15, 23, 42, 0.08);
    --shadow-glow: 0 0 0 3px rgba(14, 165, 233, 0.15);

    /* --- Espaçamento (grid 4px) ----------------------------- */
    --space-0:   0;
    --space-px:  1px;
    --space-0\.5: 2px;
    --space-1:   4px;
    --space-1\.5: 6px;
    --space-2:   8px;
    --space-2\.5: 10px;
    --space-3:   12px;
    --space-3\.5: 14px;
    --space-4:   16px;
    --space-5:   20px;
    --space-6:   24px;
    --space-7:   28px;
    --space-8:   32px;
    --space-9:   36px;
    --space-10:  40px;
    --space-12:  48px;
    --space-14:  56px;
    --space-16:  64px;
    --space-20:  80px;
    --space-24:  96px;

    /* --- Tipografia ---------------------------------------- */
    --font-family:         'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-family-mono:    'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
    --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 */
    --font-weight-normal:   400;
    --font-weight-medium:   500;
    --font-weight-semibold: 600;
    --font-weight-bold:     700;
    --line-height-tight:    1.25;
    --line-height-normal:   1.5;
    --line-height-relaxed:  1.75;

    /* --- Border radius ------------------------------------- */
    --radius-sm:   4px;
    --radius-md:   6px;
    --radius-lg:   8px;
    --radius-xl:   12px;
    --radius-2xl:  16px;
    --radius-full: 9999px;

    /* --- Transições --------------------------------------- */
    --transition-fast:   150ms ease;
    --transition-normal: 200ms ease;
    --transition-slow:   300ms ease;

    /* --- Z-index ------------------------------------------ */
    --z-dropdown: 1000;
    --z-sticky:   1020;
    --z-fixed:    1030;
    --z-modal:    1050;
    --z-popover:  1060;
    --z-toast:    1070;
    --z-tooltip:  1080;

    /* --- Gradientes --------------------------------------- */
    --gradient-primary:  linear-gradient(135deg, var(--color-primary-500) 0%, var(--color-secondary-500) 100%);
    --gradient-primary-r: linear-gradient(135deg, var(--color-secondary-500) 0%, var(--color-primary-500) 100%);
    --gradient-dark:     linear-gradient(180deg, var(--color-gray-900) 0%, var(--color-gray-800) 100%);
}

/* ============================================================
   TOKENS — DARK MODE
   ============================================================ */
.dark {
    /* Superfícies */
    --surface-page:     #0F172A;
    --surface-card:     #1E293B;
    --surface-raised:   #1E293B;
    --surface-sunken:   #0F172A;
    --surface-overlay:  rgba(0, 0, 0, 0.7);

    /* Texto */
    --text-primary:     #F8FAFC;
    --text-secondary:   #94A3B8;
    --text-muted:       #64748B;
    --text-placeholder: #475569;
    --text-inverse:     #0F172A;
    --text-link:        var(--color-primary-400);
    --text-link-hover:  var(--color-primary-300);

    /* Bordas */
    --border-color:        #334155;
    --border-color-strong: #475569;
    --border-focus:        var(--color-primary-400);

    /* Sombras (mais escuras no dark mode) */
    --shadow-xs:  0 1px 2px 0 rgba(0, 0, 0, 0.3);
    --shadow-sm:  0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px -1px rgba(0, 0, 0, 0.3);
    --shadow-md:  0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
    --shadow-lg:  0 10px 20px -4px rgba(0, 0, 0, 0.6), 0 4px 8px -4px rgba(0, 0, 0, 0.4);
    --shadow-xl:  0 20px 40px -8px rgba(0, 0, 0, 0.7), 0 8px 16px -8px rgba(0, 0, 0, 0.5);
    --shadow-glow: 0 0 0 3px rgba(14, 165, 233, 0.25);
}

/* Preferência do sistema: modo escuro automático */
@media (prefers-color-scheme: dark) {
    :root:not(.light) {
        --surface-page:     #0F172A;
        --surface-card:     #1E293B;
        --surface-raised:   #1E293B;
        --surface-sunken:   #0F172A;
        --surface-overlay:  rgba(0, 0, 0, 0.7);
        --text-primary:     #F8FAFC;
        --text-secondary:   #94A3B8;
        --text-muted:       #64748B;
        --text-placeholder: #475569;
        --text-inverse:     #0F172A;
        --text-link:        var(--color-primary-400);
        --text-link-hover:  var(--color-primary-300);
        --border-color:        #334155;
        --border-color-strong: #475569;
        --border-focus:        var(--color-primary-400);
    }
}