/**
 * Design Tokens - Fluent Focus Design System
 * Referência canônica: docs/DESIGN.md e docs/PLANO.md (Fase 8 - Dark Mode)
 */

:root {
  /* Cores - Superfícies e Neutros (Modo Claro) */
  --color-surface: #faf8ff;
  --color-surface-dim: #d2d9f4;
  --color-surface-bright: #faf8ff;
  --color-surface-container-lowest: #ffffff;
  --color-surface-container-low: #f2f3ff;
  --color-surface-container: #eaedff;
  --color-surface-container-high: #e2e7ff;
  --color-surface-container-highest: #dae2fd;
  --color-surface-variant: #dae2fd;
  --color-on-surface: #131b2e;
  --color-on-surface-variant: #464555;
  --color-inverse-surface: #283044;
  --color-inverse-on-surface: #eef0ff;
  --color-outline: #777587;
  --color-outline-variant: #c7c4d8;
  --color-surface-tint: #4d44e3;
  --color-background: #faf8ff;
  --color-on-background: #131b2e;

  /* Cores - Primária (Indigo Focus) */
  --color-primary: #4F46E5;
  --color-primary-active: #3525cd;
  --color-primary-hover: #6366f1;
  --color-primary-shadow: #3730a3;
  --color-on-primary: #ffffff;
  --color-primary-container: #eef2ff;
  --color-on-primary-container: #3730a3;
  --color-primary-fixed: #e2dfff;
  --color-on-primary-fixed: #0f0069;

  /* Cores - Secundária (Emerald Mastery & Streak) */
  --color-secondary: #10B981;
  --color-secondary-active: #006c49;
  --color-on-secondary: #ffffff;
  --color-secondary-container: #ecfdf5;
  --color-on-secondary-container: #065f46;
  --color-secondary-fixed: #6ffbbe;
  --color-on-secondary-fixed: #002113;

  /* Cores - Terciária (Amber Review & Urgency) */
  --color-tertiary: #F59E0B;
  --color-tertiary-active: #684000;
  --color-on-tertiary: #ffffff;
  --color-tertiary-container: #fffbeb;
  --color-on-tertiary-container: #92400e;
  --color-tertiary-fixed: #ffddb8;
  --color-on-tertiary-fixed: #2a1700;

  /* Cores - Erro & Validação */
  --color-error: #ba1a1a;
  --color-on-error: #ffffff;
  --color-error-container: #ffdad6;
  --color-on-error-container: #93000a;

  /* Bordas Sutis e Divisores */
  --color-border-subtle: #e2e8f0;
  --color-border-strong: #cbd5e1;
  --color-border-muted: #f1f5f9;

  /* Fundos Especiais da Casca */
  --color-header-bg: rgba(250, 248, 255, 0.92);
  --color-nav-bg: rgba(255, 255, 255, 0.96);
  --color-modal-drag: #cbd5e1;

  /* Tipografia - Famílias */
  --font-family-headline: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-family-body: 'Inter', system-ui, -apple-system, sans-serif;

  /* Cantos Arredondados */
  --radius-sm: 0.25rem;   /* 4px */
  --radius-base: 0.5rem;  /* 8px */
  --radius-md: 0.75rem;   /* 12px */
  --radius-lg: 1rem;      /* 16px */
  --radius-xl: 1.5rem;    /* 24px */
  --radius-full: 9999px;

  /* Espaçamentos */
  --space-xs: 0.25rem;    /* 4px */
  --space-sm: 0.5rem;     /* 8px */
  --space-md: 1rem;       /* 16px */
  --space-lg: 1.5rem;     /* 24px */
  --space-xl: 2.5rem;     /* 40px */
  --gutter: 1.5rem;
  --gutter-mobile: 1rem;
  --margin: 2rem;
  --margin-mobile: 1rem;

  /* Sombras e Elevação */
  --shadow-level-1: 0 1px 3px 0 rgba(15, 23, 42, 0.04), 0 1px 2px -1px rgba(15, 23, 42, 0.02);
  --shadow-level-2: 0 4px 6px -1px rgba(15, 23, 42, 0.05), 0 2px 4px -2px rgba(15, 23, 42, 0.03);
  --shadow-level-3: 0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -4px rgba(15, 23, 42, 0.03);
  --shadow-tactile-primary: 0 2px 0 0 #3730A3;
  --shadow-tactile-secondary: 0 2px 0 0 #006c49;
  --shadow-tactile-card: 0 2px 0 0 rgba(15, 23, 42, 0.08);

  /* Transições Táteis */
  --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==============================================================================
   Modo Escuro (Dark Mode) - Seletor Explícito [data-theme="dark"]
   ============================================================================== */
:root[data-theme="dark"] {
  /* Cores - Superfícies e Neutros (Modo Escuro / Slate Dark) */
  --color-surface: #0b0f19;
  --color-surface-dim: #070a12;
  --color-surface-bright: #172033;
  --color-surface-container-lowest: #0f172a;
  --color-surface-container-low: #131d35;
  --color-surface-container: #18233e;
  --color-surface-container-high: #1e2c4d;
  --color-surface-container-highest: #26365c;
  --color-surface-variant: #26365c;
  --color-on-surface: #f1f5f9;
  --color-on-surface-variant: #94a3b8;
  --color-inverse-surface: #f8fafc;
  --color-inverse-on-surface: #0f172a;
  --color-outline: #64748b;
  --color-outline-variant: #334155;
  --color-surface-tint: #818cf8;
  --color-background: #0b0f19;
  --color-on-background: #f1f5f9;

  /* Cores - Primária (Indigo Focus para Superfície Escura) */
  --color-primary: #6366f1;
  --color-primary-active: #4f46e5;
  --color-primary-hover: #818cf8;
  --color-primary-shadow: #312e81;
  --color-on-primary: #ffffff;
  --color-primary-container: #1e1b4b;
  --color-on-primary-container: #c7d2fe;
  --color-primary-fixed: #312e81;
  --color-on-primary-fixed: #e0e7ff;

  /* Cores - Secundária (Emerald Mastery para Superfície Escura) */
  --color-secondary: #10B981;
  --color-secondary-active: #059669;
  --color-on-secondary: #ffffff;
  --color-secondary-container: #064e3b;
  --color-on-secondary-container: #a7f3d0;
  --color-secondary-fixed: #065f46;
  --color-on-secondary-fixed: #6ffbbe;

  /* Cores - Terciária (Amber Review) */
  --color-tertiary: #F59E0B;
  --color-tertiary-active: #d97706;
  --color-on-tertiary: #ffffff;
  --color-tertiary-container: #451a03;
  --color-on-tertiary-container: #fde68a;
  --color-tertiary-fixed: #78350f;
  --color-on-tertiary-fixed: #ffddb8;

  /* Cores - Erro & Validação */
  --color-error: #ef4444;
  --color-on-error: #ffffff;
  --color-error-container: #7f1d1d;
  --color-on-error-container: #fecaca;

  /* Bordas Sutis e Divisores no Escuro */
  --color-border-subtle: #1e293b;
  --color-border-strong: #334155;
  --color-border-muted: #172033;

  /* Fundos Especiais da Casca no Escuro */
  --color-header-bg: rgba(11, 15, 25, 0.92);
  --color-nav-bg: rgba(15, 23, 42, 0.96);
  --color-modal-drag: #475569;

  /* Sombras Táteis Escuras */
  --shadow-level-1: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px -1px rgba(0, 0, 0, 0.3);
  --shadow-level-2: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -2px rgba(0, 0, 0, 0.4);
  --shadow-level-3: 0 10px 15px -3px rgba(0, 0, 0, 0.6), 0 4px 6px -4px rgba(0, 0, 0, 0.5);
  --shadow-tactile-primary: 0 2px 0 0 #312e81;
  --shadow-tactile-secondary: 0 2px 0 0 #064e3b;
  --shadow-tactile-card: 0 2px 0 0 rgba(0, 0, 0, 0.6);
}

/* ==============================================================================
   Fallback para preferência do sistema operacional antes da inicialização de JS
   ============================================================================== */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    --color-surface: #0b0f19;
    --color-surface-dim: #070a12;
    --color-surface-bright: #172033;
    --color-surface-container-lowest: #0f172a;
    --color-surface-container-low: #131d35;
    --color-surface-container: #18233e;
    --color-surface-container-high: #1e2c4d;
    --color-surface-container-highest: #26365c;
    --color-surface-variant: #26365c;
    --color-on-surface: #f1f5f9;
    --color-on-surface-variant: #94a3b8;
    --color-inverse-surface: #f8fafc;
    --color-inverse-on-surface: #0f172a;
    --color-outline: #64748b;
    --color-outline-variant: #334155;
    --color-surface-tint: #818cf8;
    --color-background: #0b0f19;
    --color-on-background: #f1f5f9;
    --color-primary: #6366f1;
    --color-primary-active: #4f46e5;
    --color-primary-hover: #818cf8;
    --color-primary-shadow: #312e81;
    --color-on-primary: #ffffff;
    --color-primary-container: #1e1b4b;
    --color-on-primary-container: #c7d2fe;
    --color-primary-fixed: #312e81;
    --color-on-primary-fixed: #e0e7ff;
    --color-secondary: #10B981;
    --color-secondary-active: #059669;
    --color-on-secondary: #ffffff;
    --color-secondary-container: #064e3b;
    --color-on-secondary-container: #a7f3d0;
    --color-secondary-fixed: #065f46;
    --color-on-secondary-fixed: #6ffbbe;
    --color-tertiary: #F59E0B;
    --color-tertiary-active: #d97706;
    --color-on-tertiary: #ffffff;
    --color-tertiary-container: #451a03;
    --color-on-tertiary-container: #fde68a;
    --color-tertiary-fixed: #78350f;
    --color-on-tertiary-fixed: #ffddb8;
    --color-error: #ef4444;
    --color-on-error: #ffffff;
    --color-error-container: #7f1d1d;
    --color-on-error-container: #fecaca;
    --color-border-subtle: #1e293b;
    --color-border-strong: #334155;
    --color-border-muted: #172033;
    --color-header-bg: rgba(11, 15, 25, 0.92);
    --color-nav-bg: rgba(15, 23, 42, 0.96);
    --color-modal-drag: #475569;
    --shadow-level-1: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px -1px rgba(0, 0, 0, 0.3);
    --shadow-level-2: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -2px rgba(0, 0, 0, 0.4);
    --shadow-level-3: 0 10px 15px -3px rgba(0, 0, 0, 0.6), 0 4px 6px -4px rgba(0, 0, 0, 0.5);
    --shadow-tactile-primary: 0 2px 0 0 #312e81;
    --shadow-tactile-secondary: 0 2px 0 0 #064e3b;
    --shadow-tactile-card: 0 2px 0 0 rgba(0, 0, 0, 0.6);
  }
}