/*
 * ciberian — theme.css
 * Fonte única das variáveis CSS consumidas por toda página e componente do pacote.
 * Gerado pelo Design System Forge · Phase 5 · 2026-09-21
 *
 * Os valores vêm de tokens.json. Não altere uma cor aqui sem alterá-la lá.
 * TEMA PADRÃO É LIGHT. O padrão de runtime vive em design-dna.yaml como
 * themes.default e chega à página como data-default-theme no elemento html.
 */

/* ─────────────────────────────────────────────
   Font faces — self-hosted, sem CDN

   Inter e Sora são as fontes oficiais da Ciberian e vieram do cliente como
   woff2 variáveis. Estão em ./fonts/ e são carregadas daqui — o pacote abre
   correto num notebook corporativo sem acesso externo.

   MONOESPAÇADA — DECISÃO DECLARADA. A identidade da Ciberian não define uma
   fonte monoespaçada, e a Phase 5 do DSF traz JetBrains Mono apenas como
   default do framework. Embarcar JetBrains Mono seria introduzir uma quarta
   família que a marca não tem, e ~200 KB de woff2 para renderizar ID de
   registro e trecho de código. A escolha foi a pilha monoespaçada do sistema
   (ui-monospace → SF Mono no macOS/iOS, Consolas no Windows, Liberation Mono
   no Linux). Ela existe offline em toda máquina-alvo, não pede download e não
   inventa marca. Para trocar: acrescente o woff2 em ./fonts/, um @font-face
   aqui e ponha a família na frente de --font-family-mono.
   ───────────────────────────────────────────── */
@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-variable.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Sora';
  src: url('/fonts/sora-variable.woff2') format('woff2');
  font-weight: 100 800; font-style: normal; font-display: swap;
}
/* Fallback de CDN, comentado de propósito — nunca o mecanismo primário:
   @import url('https://fonts.googleapis.com/css2?family=Sora:wght@400..700&family=Inter:wght@400..700&display=swap'); */

/* ─────────────────────────────────────────────
   Light Mode — O PADRÃO deste projeto
   Página em Névoa, card em Pure White, texto em Azul Marinho.
   ───────────────────────────────────────────── */
:root {
  /* Colors — Semantic */
  --color-background:           oklch(0.972 0.003 248);
  --color-foreground:           oklch(0.247 0.041 243);
  --color-primary:              oklch(0.518 0.218 257);
  --color-primary-foreground:   oklch(1.000 0.000 0);
  --color-secondary:            oklch(0.945 0.006 248);
  --color-secondary-foreground: oklch(0.300 0.030 243);
  --color-accent:               oklch(0.950 0.032 257);
  --color-accent-foreground:    oklch(0.430 0.180 257);
  --color-muted:                oklch(0.962 0.004 248);
  --color-muted-foreground:     oklch(0.500 0.020 233);
  --color-border:               oklch(0.912 0.005 248);
  --color-input:                oklch(0.640 0.005 248);
  --color-ring:                 oklch(0.518 0.218 257);
  --color-card:                 oklch(1.000 0.000 0);
  --color-card-foreground:      oklch(0.247 0.041 243);
  --color-popover:              oklch(1.000 0.000 0);
  --color-popover-foreground:   oklch(0.247 0.041 243);
  --color-destructive:          oklch(0.534 0.181 023);
  --color-destructive-foreground: oklch(1.000 0.000 0);
  --color-success:              oklch(0.488 0.140 158);
  --color-success-foreground:   oklch(1.000 0.000 0);
  --color-warning:              oklch(0.515 0.130 083);
  --color-warning-foreground:   oklch(1.000 0.000 0);
  --color-info:                 oklch(0.518 0.218 257);
  --color-info-foreground:      oklch(1.000 0.000 0);

  /* Overlay — atrás de modais, sheets e da sidebar mobile.
     Token, não literal, para o scrim acompanhar o tema. */
  --color-overlay:              oklch(0 0 0 / 0.35);

  /* ── Sidebar ──────────────────────────────
     Trilho claro. O site institucional da Ciberian é branco com header branco;
     um bloco escuro dentro de um app claro vira poço de contraste na borda do
     campo visual, e --color-sidebar-primary é usado tanto como TEXTO
     (.nav-sub-item.active) quanto como FUNDO de badge com
     --color-primary-foreground por cima. Só um trilho claro deixa os dois
     passarem em AA com a mesma cor. Consumido por ds-shell.css. */
  --color-sidebar-background:   oklch(1.000 0.000 0);
  --color-sidebar-foreground:   oklch(0.247 0.041 243);
  --color-sidebar-primary:      oklch(0.518 0.218 257);
  --color-sidebar-border:       oklch(0.912 0.005 248);
  --color-sidebar-muted:        oklch(0.500 0.020 233);
  --color-sidebar-accent:       oklch(0.955 0.030 257);

  /* Escalas categóricas. Sem significado semântico — 5 matizes distinguíveis.
     chart-3 é o Roxo Energia: esta é a única família de tokens em que ele
     entra, por decisão de projeto (ver design-rules.md § Roxo Energia).
     Este projeto não tem banda de matiz proibida — ver design-dna.yaml. */
  --chart-1:                    oklch(0.560 0.218 257);
  --chart-2:                    oklch(0.560 0.130 158);
  --chart-3:                    oklch(0.560 0.200 291);
  --chart-4:                    oklch(0.620 0.130 083);
  --chart-5:                    oklch(0.580 0.170 023);

  /* Ciclo de avatar. Separado de --chart-* porque a restrição é outra: gráfico
     precisa de contraste entre pares adjacentes, avatar precisa ser
     distinguível N-a-N contra --color-card. */
  --avatar-1:                   oklch(0.560 0.150 257);
  --avatar-2:                   oklch(0.560 0.150 158);
  --avatar-3:                   oklch(0.560 0.150 291);
  --avatar-4:                   oklch(0.560 0.150 083);
  --avatar-5:                   oklch(0.560 0.150 023);
  --avatar-6:                   oklch(0.560 0.150 330);
  --avatar-7:                   oklch(0.560 0.150 205);
  --avatar-8:                   oklch(0.560 0.150 130);

  /* ── Gradientes de marca ──────────────────
     Os três gradientes oficiais, como tokens, para que ninguém os redesenhe.
     REGRA DE USO (design-rules.md § Gradientes): no portal o gradiente aparece
     em UM lugar — a marca na sidebar. Superfície de dado nunca recebe
     gradiente. --gradient-brand-from/-to existem separados porque o símbolo
     infinito é traçado com um <linearGradient> SVG, que precisa dos dois
     extremos como cor, não como imagem. */
  --gradient-brand-from:        oklch(0.608 0.215 257);
  --gradient-brand-to:          oklch(0.800 0.180 160);
  --gradient-brand:             linear-gradient(135deg, oklch(0.608 0.215 257), oklch(0.800 0.180 160));
  --gradient-night:             linear-gradient(135deg, oklch(0.000 0.000 0), oklch(0.308 0.018 242));
  --gradient-energy:            linear-gradient(135deg, oklch(0.611 0.229 291), oklch(0.712 0.181 023));

  /* shadcn/ui variable mapping (necessário para compatibilidade shadcn) */
  --background:         var(--color-background);
  --foreground:         var(--color-foreground);
  --primary:            var(--color-primary);
  --primary-foreground: var(--color-primary-foreground);
  --secondary:          var(--color-secondary);
  --secondary-foreground: var(--color-secondary-foreground);
  --muted:              var(--color-muted);
  --muted-foreground:   var(--color-muted-foreground);
  --accent:             var(--color-accent);
  --accent-foreground:  var(--color-accent-foreground);
  --destructive:        var(--color-destructive);
  --destructive-foreground: var(--color-destructive-foreground);
  --border:             var(--color-border);
  --input:              var(--color-input);
  --ring:               var(--color-ring);
  --card:               var(--color-card);
  --card-foreground:    var(--color-card-foreground);
  --popover:            var(--color-popover);
  --popover-foreground: var(--color-popover-foreground);
  --sidebar-background:         var(--color-sidebar-background);
  --sidebar-foreground:         var(--color-sidebar-foreground);
  --sidebar-primary:            var(--color-sidebar-primary);
  --sidebar-primary-foreground: var(--color-sidebar-background);
  --sidebar-accent:             var(--color-sidebar-accent);
  --sidebar-accent-foreground:  var(--color-sidebar-foreground);
  --sidebar-border:             var(--color-sidebar-border);
  --sidebar-ring:               var(--color-sidebar-primary);

  /* Tipografia — as duas famílias oficiais da marca, embarcadas acima.
     A monoespaçada é a pilha do sistema, por decisão declarada no topo. */
  --font-family-heading: 'Sora', system-ui, sans-serif;
  --font-family-body:    'Inter', system-ui, sans-serif;
  --font-family-mono:    ui-monospace, 'SFMono-Regular', 'Menlo', 'Consolas', 'Liberation Mono', monospace;

  /* Root font-size — é isto que define a densidade do app.
     PRECISA ficar no elemento html abaixo, nunca só no body: todo token de
     spacing e de radius está em rem e resolve contra a raiz.
     0.9375rem = 15px: um passo acima do default compacto do DSF, porque o
     público inclui cliente externo não-técnico em uso diário.
     Nunca escreva um nome de token terminado em asterisco imediatamente antes
     de uma barra dentro de um comentário — o comentário fecha cedo e a
     declaração seguinte morre em silêncio. */
  --font-size-root: 0.9375rem;

  /* Shorthand de font — a ordem é fixada pela spec e é fácil de errar: o peso
     vem ANTES do tamanho, nunca depois. "1.75rem / 1.2 600 Sora" é inválido e
     a declaração inteira é descartada em silêncio, o que faz todo heading
     renderizar no tamanho de corpo sem nada reportar. */
  --font-display:  600 1.75rem/1.2 var(--font-family-heading);
  --font-heading:  600 1.375rem/1.3 var(--font-family-heading);
  --font-title:    600 1.0625rem/1.4 var(--font-family-body);
  --font-body:     400 1rem/1.55 var(--font-family-body);
  --font-caption:  400 0.8125rem/1.45 var(--font-family-body);

  /* Letter spacing */
  --tracking-display: -0.022em;
  --tracking-heading: -0.018em;
  --tracking-title:   -0.012em;
  --tracking-body:     0em;
  --tracking-caption:  0.012em;

  /* Radius — caráter "rounded", âncora md = 0.75rem (11.25px na raiz de 15px).
     Cinco degraus, sempre crescente: xs < sm < md < lg < xl. */
  --radius-xs:   0.25rem;
  --radius-sm:   0.5rem;
  --radius-md:   0.75rem;
  --radius-lg:   1rem;
  --radius-xl:   1.5rem;
  --radius-full: 9999px;

  /* Papéis de raio — qual degrau cada família de componente consome.
     box       superfície: card, alerta, painel, wrapper de tabela, tooltip, toast
     field     controle: botão, input, select, busca
     selector  marcador pequeno: badge, checkbox, célula de matriz
     Cada um é um degrau da escala acima, nunca um valor em rem. --radius-full
     não é papel: pertence ao que é redondo por natureza — avatar, switch,
     barra de progresso, status dot. */
  --radius-box:      var(--radius-lg);
  --radius-field:    var(--radius-xl);
  --radius-selector: var(--radius-md);

  /* shadcn radius mapping — primitivo shadcn é controle. */
  --radius: var(--radius-field);

  /* Largura de borda — um botão único para toda superfície com borda. */
  --border-width: 1px;

  /* Spacing scale */
  --spacing-1:  0.25rem;
  --spacing-2:  0.5rem;
  --spacing-3:  0.75rem;
  --spacing-4:  1rem;
  --spacing-5:  1.25rem;
  --spacing-6:  1.5rem;
  --spacing-8:  2rem;
  --spacing-10: 2.5rem;
  --spacing-12: 3rem;
  --spacing-16: 4rem;
  --spacing-20: 5rem;
  --spacing-24: 6rem;

  /* Sombras — caráter "barely-there". A cor da sombra é Azul Marinho com
     alfa, não preto puro: sobre a página em Névoa o preto deixa uma borda
     acinzentada morta, e o azul mantém a sombra dentro da paleta.
     Card vive em sm; md é o teto de dropdown e sheet; lg e xl existem porque
     ds-patterns.css os referencia, e ficam deliberadamente contidos. */
  --shadow-none: none;
  --shadow-sm:   0 1px 2px oklch(0.247 0.041 243 / 0.06), 0 1px 3px oklch(0.247 0.041 243 / 0.04);
  --shadow-md:   0 2px 4px oklch(0.247 0.041 243 / 0.07), 0 4px 10px oklch(0.247 0.041 243 / 0.05);
  --shadow-lg:   0 4px 8px oklch(0.247 0.041 243 / 0.08), 0 10px 20px oklch(0.247 0.041 243 / 0.06);
  --shadow-xl:   0 8px 16px oklch(0.247 0.041 243 / 0.10), 0 20px 40px oklch(0.247 0.041 243 / 0.07);

  /* Motion — funcional, sem exibição */
  --duration-fast:   120ms;
  --duration-normal: 200ms;
  --duration-slow:   320ms;
  --ease-default:    cubic-bezier(0.2, 0, 0, 1);
  --ease-in:         cubic-bezier(0.4, 0, 1, 1);
  --ease-out:        cubic-bezier(0, 0, 0.2, 1);

  /* Density (default = 1) */
  --density-scale: 1;

  /* ── Tonal scales ────────────────────────────
     Tokens de verdade, para o produto alcançar um passo mais claro ou mais
     escuro da própria cor sem inventar nenhum. 500 é a âncora: é
     --color-primary. O Eletric Blue puro da marca (#007AFF) fica em
     --brand-450 — ver a nota logo abaixo. */
  --brand-50:   oklch(0.970 0.020 257);
  --brand-100:  oklch(0.935 0.045 257);
  --brand-200:  oklch(0.880 0.085 257);
  --brand-300:  oklch(0.800 0.140 257);
  --brand-400:  oklch(0.690 0.190 257);
  /* O Eletric Blue exato da identidade, oklch(0.603 0.218 257) = #007AFF.
     Fica num degrau próprio porque contra branco ele dá 4.01:1 — abaixo do
     mínimo AA de 4.5:1 para texto. --color-primary usa o degrau 500, um passo
     mais escuro, mesmo matiz e mesmo croma; a cor literal da marca continua
     disponível aqui, e é ela que o tema dark e a marca usam. */
  --brand-450:  oklch(0.603 0.218 257);
  --brand-500:  oklch(0.518 0.218 257);
  --brand-600:  oklch(0.500 0.205 257);
  --brand-700:  oklch(0.420 0.175 257);
  --brand-800:  oklch(0.340 0.140 257);
  --brand-900:  oklch(0.250 0.100 257);

  /* A rampa neutra carrega um traço do matiz da marca (243, o do Azul
     Marinho), para os cinzas parecerem da família em vez de mortos.
     O croma fica muito baixo em toda a rampa. */
  --neutral-50:  oklch(0.985 0.003 243);
  --neutral-100: oklch(0.965 0.004 243);
  --neutral-200: oklch(0.925 0.006 243);
  --neutral-300: oklch(0.870 0.008 243);
  --neutral-400: oklch(0.760 0.012 243);
  --neutral-500: oklch(0.640 0.016 243);
  --neutral-600: oklch(0.520 0.018 243);
  --neutral-700: oklch(0.400 0.024 243);
  --neutral-800: oklch(0.310 0.030 243);
  --neutral-900: oklch(0.247 0.041 243);
  --neutral-950: oklch(0.180 0.035 243);
}

/* ─────────────────────────────────────────────
   Dark Mode — suportado, não é o padrão.
   Superfícies da identidade: Azul Marinho (fundo), Grafite (card),
   Carvão (popover e superfície elevada).
   ───────────────────────────────────────────── */
.dark {
  --color-background:           oklch(0.247 0.041 243);
  --color-foreground:           oklch(0.970 0.004 248);
  --color-primary:              oklch(0.760 0.160 257);
  --color-primary-foreground:   oklch(0.180 0.030 250);
  --color-secondary:            oklch(0.340 0.047 241);
  --color-secondary-foreground: oklch(0.970 0.004 248);
  --color-accent:               oklch(0.340 0.060 250);
  --color-accent-foreground:    oklch(0.900 0.060 257);
  --color-muted:                oklch(0.300 0.026 242);
  --color-muted-foreground:     oklch(0.740 0.018 233);
  --color-border:               oklch(0.390 0.030 242);
  --color-input:                oklch(0.530 0.047 241);
  --color-ring:                 oklch(0.760 0.160 257);
  --color-card:                 oklch(0.308 0.018 242);
  --color-card-foreground:      oklch(0.970 0.004 248);
  --color-popover:              oklch(0.340 0.047 241);
  --color-popover-foreground:   oklch(0.970 0.004 248);
  --color-destructive:          oklch(0.810 0.170 023);
  --color-destructive-foreground: oklch(0.180 0.030 250);
  --color-success:              oklch(0.809 0.189 158);
  --color-success-foreground:   oklch(0.180 0.030 250);
  --color-warning:              oklch(0.850 0.154 083);
  --color-warning-foreground:   oklch(0.180 0.030 250);
  --color-info:                 oklch(0.760 0.160 257);
  --color-info-foreground:      oklch(0.180 0.030 250);

  --color-overlay:              oklch(0 0 0 / 0.60);

  /* Sidebar — um degrau abaixo do fundo da página, para o trilho separar do
     conteúdo sem precisar de sombra. */
  --color-sidebar-background:   oklch(0.200 0.030 243);
  --color-sidebar-foreground:   oklch(0.960 0.004 248);
  --color-sidebar-primary:      oklch(0.760 0.160 257);
  --color-sidebar-border:       oklch(0.330 0.030 242);
  --color-sidebar-muted:        oklch(0.720 0.020 233);
  --color-sidebar-accent:       oklch(0.300 0.045 250);

  --chart-1:                    oklch(0.720 0.160 257);
  --chart-2:                    oklch(0.809 0.189 158);
  --chart-3:                    oklch(0.700 0.180 291);
  --chart-4:                    oklch(0.850 0.154 083);
  --chart-5:                    oklch(0.712 0.181 023);

  --avatar-1:                   oklch(0.740 0.140 257);
  --avatar-2:                   oklch(0.740 0.140 158);
  --avatar-3:                   oklch(0.740 0.140 291);
  --avatar-4:                   oklch(0.740 0.140 083);
  --avatar-5:                   oklch(0.740 0.140 023);
  --avatar-6:                   oklch(0.740 0.140 330);
  --avatar-7:                   oklch(0.740 0.140 205);
  --avatar-8:                   oklch(0.740 0.140 130);
}

/* ─────────────────────────────────────────────
   High Contrast Mode
   Ativado pela classe .high-contrast no elemento html.
   Fundo preto puro, texto branco puro, marca em claridade alta.
   ───────────────────────────────────────────── */
.high-contrast {
  --color-background:             oklch(0.00 0.000 0);
  --color-foreground:             oklch(1.00 0.000 0);
  --color-primary:                oklch(0.780 0.150 257);
  --color-primary-foreground:     oklch(0.00 0.000 0);
  --color-secondary:              oklch(0.08 0.000 0);
  --color-secondary-foreground:   oklch(1.00 0.000 0);
  --color-accent:                 oklch(0.14 0.000 0);
  --color-accent-foreground:      oklch(1.00 0.000 0);
  --color-muted:                  oklch(0.08 0.000 0);
  --color-muted-foreground:       oklch(0.85 0.000 0);
  --color-border:                 oklch(0.70 0.000 0);
  --color-input:                  oklch(0.70 0.000 0);
  --color-ring:                   oklch(1.00 0.000 0);
  --color-card:                   oklch(0.08 0.000 0);
  --color-card-foreground:        oklch(1.00 0.000 0);
  --color-popover:                oklch(0.14 0.000 0);
  --color-popover-foreground:     oklch(1.00 0.000 0);
  --color-destructive:            oklch(0.80 0.180 023);
  --color-destructive-foreground: oklch(0.00 0.000 0);
  --color-success:                oklch(0.85 0.180 158);
  --color-success-foreground:     oklch(0.00 0.000 0);
  --color-warning:                oklch(0.88 0.150 083);
  --color-warning-foreground:     oklch(0.00 0.000 0);
  --color-info:                   oklch(0.780 0.150 257);
  --color-info-foreground:        oklch(0.00 0.000 0);

  --color-overlay:                oklch(0 0 0 / 0.75);

  --chart-1:                      oklch(0.80 0.140 257);
  --chart-2:                      oklch(0.87 0.170 158);
  --chart-3:                      oklch(0.78 0.170 291);
  --chart-4:                      oklch(0.88 0.150 083);
  --chart-5:                      oklch(0.78 0.150 023);

  --avatar-1:                     oklch(0.82 0.120 257);
  --avatar-2:                     oklch(0.82 0.120 158);
  --avatar-3:                     oklch(0.82 0.120 291);
  --avatar-4:                     oklch(0.82 0.120 083);
  --avatar-5:                     oklch(0.82 0.120 023);
  --avatar-6:                     oklch(0.82 0.120 330);
  --avatar-7:                     oklch(0.82 0.120 205);
  --avatar-8:                     oklch(0.82 0.120 130);

  /* Sidebar */
  --color-sidebar-background:     oklch(0.00 0.000 0);
  --color-sidebar-foreground:     oklch(1.00 0.000 0);
  --color-sidebar-primary:        oklch(0.780 0.150 257);
  --color-sidebar-border:         oklch(0.70 0.000 0);
  --color-sidebar-muted:          oklch(0.75 0.000 0);
  --color-sidebar-accent:         oklch(0.10 0.000 0);
}

/* ─────────────────────────────────────────────
   Density Modifiers
   ciberian entrega default. compact e spacious ficam disponíveis para quem
   reaproveitar o pacote num produto de outra densidade.
   ───────────────────────────────────────────── */
[data-density="compact"]  { --density-scale: 0.75; }
[data-density="default"]  { --density-scale: 1; }
[data-density="spacious"] { --density-scale: 1.25; }

/* ─────────────────────────────────────────────
   Base Styles
   ───────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  border-color: var(--color-border);
}

html {
  font-family: var(--font-family-body);
  font-size: var(--font-size-root); /* PRECISA ficar no html, não no body */
  background-color: var(--color-background);
  color: var(--color-foreground);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ─────────────────────────────────────────────
   Reduced Motion
   ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}