/*
 * DESIGN TOKENS
 * Responsabilidade: única fonte de verdade para cor, espaço, tipografia,
 * radius e sombra. Componentes NUNCA usam valores crus — só estas variáveis.
 *
 * Duas camadas:
 *   1. Primitivos  → paleta crua, não usar direto em componente.
 *   2. Semânticos  → o que componentes consomem. O tema dark reescreve
 *      apenas os semânticos, apontando para outros primitivos.
 */

:root {
  /* ---- Primitivos: escala de cinza (neutra, sem tonalidade azulada) ---- */
  color-scheme: light;
  --gray-0:   #ffffff;
  --gray-50:  #f7f7f8;
  --gray-100: #ececef;
  --gray-200: #e0e0e3;
  --gray-300: #cfcfd4;
  --gray-400: #a9a9b0;
  --gray-500: #7d7d85;
  --gray-600: #56565c;
  --gray-700: #3a3a3f;
  --gray-800: #262629;
  --gray-900: #18181a;
  --gray-950: #0f0f10;
  --gray-1000: #000000;

  /* ---- Primitivos: ação (índigo refinado) e perigo (vermelho) ---- */
  --blue-400: #748ffc;
  --blue-500: #4263eb;
  --blue-600: #3b5bdb;
  --red-400:  #f2585f;
  --red-500:  #dc2f37;
  --red-600:  #b91c23;
  --green-400: #4ade80;
  --green-500: #22a06b;
  --green-600: #15803d;
  --amber-400: #fbbf24;
  --amber-500: #d97706;
  --amber-600: #b45309;

  /* ---- Tipografia ---- */
  /* Stack neutra de sistema: legível, sem dependência de fonte externa.
     Prioriza a fonte nativa de cada SO (clareza tipo ChatGPT). */
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Code", "JetBrains Mono",
               Menlo, Consolas, monospace;

  --text-xs:   0.75rem;   /* 12px */
  --text-sm:   0.875rem;  /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-lg:   1.125rem;  /* 18px */
  --text-xl:   1.375rem;  /* 22px */
  --text-2xl:  1.75rem;   /* 28px */

  --leading-tight:  1.25;
  --leading-normal: 1.5;

  --weight-normal:   400;
  --weight-medium:   500;
  --weight-semibold: 600;

  /* ---- Espaçamento (escala base 4px) ---- */
  --space-1:  0.25rem;  /* 4px  */
  --space-2:  0.5rem;   /* 8px  */
  --space-3:  0.75rem;  /* 12px */
  --space-4:  1rem;     /* 16px */
  --space-5:  1.5rem;   /* 24px */
  --space-6:  2rem;     /* 32px */
  --space-7:  3rem;     /* 48px */

  /* ---- Radius ---- */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-full: 9999px;

  /* ---- Sombra (discreta; usada com parcimônia) ---- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.10);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.18);  /* modais, popovers */

  /* ---- Layout ---- */
  /* Páginas largas (listas, dashboard, show): generoso, enche telas grandes
     até ~ultrawide em vez de deixar buraco lateral. */
  --max-width-content: 100rem;
  /* Formulários e leitura: largura confortável — campos não se espalham. */
  --max-width-form: 52rem;
  --border-width: 1px;

  /* =====================================================================
     SEMÂNTICOS — TEMA CLARO (padrão)
     Componentes consomem APENAS estas variáveis.
     ===================================================================== */
  --color-bg:           var(--gray-50);   /* fundo da página */
  --color-surface:      var(--gray-0);    /* cards, painéis, inputs */
  --color-surface-2:    var(--gray-100);  /* superfície secundária */
  --color-text:         var(--gray-900);  /* texto principal */
  --color-text-muted:   #6c6c74;          /* secundário — AA ≥4.5 mesmo sobre o bg gray-50 */
  --color-text-subtle:  #6c6c74;          /* legendas/help — AA exige escurecer no claro */
  --color-text-placeholder: var(--gray-400); /* placeholder: isento de AA, mais claro */
  --color-border:       var(--gray-200);  /* bordas e divisores */
  --color-hover:        var(--gray-100);  /* hover discreto em cinza */
  --color-active:       var(--gray-200);  /* estado ativo/pressionado */

  --color-accent:        var(--blue-500); /* ação primária (azul sóbrio) */
  --color-accent-hover:  var(--blue-600);
  --color-accent-text:   var(--gray-0);   /* texto sobre accent */

  --color-link:          var(--blue-600); /* link = azul de ação */

  --color-danger:        var(--red-500);  /* somente ações destrutivas */
  --color-danger-hover:  var(--red-600);
  --color-danger-text:   var(--gray-0);
  --color-focus-ring:    var(--blue-500); /* anel de foco = cor de ação */

  /* Scrim de sobreposição (modal, lightbox). Preto translúcido, igual nos
     dois temas. strong = mais opaco, para o visualizador de fotos. */
  --color-overlay:        rgb(0 0 0 / 60%);
  --color-overlay-strong: rgb(0 0 0 / 85%);

  /* Status (badges): texto forte + fundo suave. O "soft" é derivado da
     própria cor de status misturada à superfície (color-mix) — uma fonte só,
     consistente, e que se adapta sozinha ao tema (sem hex hardcoded). */
  --color-success:       var(--green-600);
  --color-success-soft:  color-mix(in srgb, var(--color-success) 14%, var(--color-surface));
  --color-warning:       var(--amber-600);
  --color-warning-soft:  color-mix(in srgb, var(--color-warning) 14%, var(--color-surface));
  --color-status-danger-soft: color-mix(in srgb, var(--color-danger) 14%, var(--color-surface));
  --color-status-neutral:      var(--gray-600);
  --color-status-neutral-soft: var(--gray-100);

  /* Derivados da cor de ação (também via color-mix, adaptam ao tema):
     soft = fundo de chip/realce; muted = fundo do primary desabilitado. */
  --color-accent-soft:   color-mix(in srgb, var(--color-accent) 12%, var(--color-surface));
  --color-accent-muted:  color-mix(in srgb, var(--color-accent) 32%, var(--color-surface));
}

/* =======================================================================
   SEMÂNTICOS — TEMA ESCURO (all-black / cinza escuro, baixo contraste)
   Reescreve SÓ os semânticos. Ativado por [data-theme="dark"] no <html>.
   O tema inicial é resolvido pelo JS (script anti-FOUC + theme_controller),
   nunca por @media — o JS é a única fonte de verdade do tema.
   ======================================================================= */
[data-theme="dark"] {
  color-scheme: dark;
  --color-bg:         var(--gray-1000);  /* all-black */
  --color-surface:    var(--gray-950);   /* superfície quase preta */
  --color-surface-2:  var(--gray-900);
  --color-text:       var(--gray-100);   /* não branco puro: menos fadiga */
  --color-text-muted: var(--gray-500);   /* AA: 4.7:1 no escuro */
  --color-text-subtle: var(--gray-500);  /* legendas/help — AA exige ≥ muted no escuro */
  --color-text-placeholder: var(--gray-600); /* placeholder: isento de AA, mais dim */
  --color-border:     var(--gray-800);   /* divisor discreto */
  --color-hover:      var(--gray-900);   /* hover cinza sutil */
  --color-active:     var(--gray-800);

  --color-accent:        var(--blue-500); /* azul de ação pop sobre o preto */
  --color-accent-hover:  var(--blue-400);
  --color-accent-text:   var(--gray-0);

  --color-link:          var(--blue-400); /* azul mais claro p/ legibilidade no escuro */

  --color-danger:        var(--red-400);
  --color-danger-hover:  var(--red-500);
  --color-danger-text:   var(--gray-1000);
  --color-focus-ring:    var(--blue-500); /* anel de foco = cor de ação */

  /* Status: no escuro usa as variantes 400 (mais claras). Os "soft" e o
     accent-soft/muted são derivados no :root via color-mix e se adaptam
     sozinhos (a mistura usa a superfície escura) — não repetir aqui. */
  --color-success:       var(--green-400);
  --color-warning:       var(--amber-400);
  --color-status-neutral:      var(--gray-400);
  --color-status-neutral-soft: var(--gray-800);
}