/* Todo Preço — tokens
   GERADO por tools/gerar-tokens.py a partir de docs/design-system/tokens.json.
   Não edite à mão: mude o tokens.json e rode o script de novo.
   Breakpoints de referência (media queries não aceitam variáveis):
   375px celular | 414px celular grande | 768px tablet | 1024px desktop */

:root {
  --font-sans: "Outfit", -apple-system, "SF Pro Text", system-ui, sans-serif;
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 40px;
  --s-7: 64px;
  --s-8: 104px;
  --s-9: 168px;
  --grid: 24px;
  --radius: 10px;
  --r-node: 16px;
  --r-folder: 14px;
  --r-panel: 24px;
  --r-full: 9999px;
  --page-max: 1280px;
  --nav-h: 56px;
  --text-drum: 600 96px/92px var(--font-sans);
  --tracking-drum: -0.04em;
  --text-mega: 600 96px/88px var(--font-sans);
  --tracking-mega: -0.04em;
  --text-h1: 600 44px/48px var(--font-sans);
  --tracking-h1: -0.03em;
  --text-h2: 600 40px/46px var(--font-sans);
  --tracking-h2: -0.025em;
  --text-h3: 600 21px/26px var(--font-sans);
  --tracking-h3: -0.015em;
  --text-price: 500 34px/36px var(--font-sans);
  --tracking-price: -0.03em;
  --text-lead: 400 19px/28px var(--font-sans);
  --tracking-lead: -0.01em;
  --text-body: 400 16px/24px var(--font-sans);
  --text-ui: 500 15px/20px var(--font-sans);
  --tracking-ui: -0.005em;
  --text-caption: 500 13px/18px var(--font-sans);
  --text-note: 400 12px/17px var(--font-sans);
}

/* Tema claro (padrão) */
:root {
  color-scheme: light;
  --brand-ciano: #00E1FE;
  --brand-ciano-profundo: #006E80;
  --brand-preto: #000000;
  --brand-branco: #FFFFFF;
  --background: #FFFFFF;
  --foreground: #1D1D1F;
  --surface: #F5F5F7;
  --surface-foreground: #1D1D1F;
  --card: #F5F5F7;
  --card-foreground: #1D1D1F;
  --popover: #FFFFFF;
  --popover-foreground: #1D1D1F;
  --primary: #00E1FE;
  --primary-foreground: #000000;
  --secondary: #E8E8ED;
  --secondary-foreground: #1D1D1F;
  --muted: #F5F5F7;
  --muted-foreground: #6E6E73;
  --accent: #E6FBFF;
  --accent-foreground: #005B6A;
  --destructive: #C4122F;
  --destructive-foreground: #FFFFFF;
  --border: #E3E3E8;
  --input: #8A8A90;
  --ring: #006E80;
  --chart-1: #006E80;
  --chart-2: #3A9AAB;
  --chart-3: #79BAC6;
  --chart-4: #B4D8DF;
  --chart-5: #DCEDF0;
  --link: #006E80;
  --mark: #006E80;
  --success: #00785A;
  --success-foreground: #FFFFFF;
  --warning: #B45309;
  --warning-foreground: #FFFFFF;
  --warning-soft: #FFF1E0;
  --warning-soft-foreground: #8A4B00;
  --deal: #C4122F;
  --deal-foreground: #FFFFFF;
  --glass: rgba(255, 255, 255, 0.8);
  --shadow-node: 0 1px 2px rgba(0, 0, 0, 0.05), 0 12px 32px -12px rgba(0, 0, 0, 0.18);
  --shadow-lift: 0 2px 4px rgba(0, 0, 0, 0.06), 0 28px 56px -16px rgba(0, 0, 0, 0.28);
}

/* Tema escuro: escolhido pelo usuário */
[data-theme="dark"] {
  color-scheme: dark;
  --brand-ciano: #00E1FE;
  --brand-ciano-profundo: #006E80;
  --brand-preto: #000000;
  --brand-branco: #FFFFFF;
  --background: #000000;
  --foreground: #F5F5F7;
  --surface: #1A1A1C;
  --surface-foreground: #F5F5F7;
  --card: #242426;
  --card-foreground: #F5F5F7;
  --popover: #1C1C1E;
  --popover-foreground: #F5F5F7;
  --primary: #00E1FE;
  --primary-foreground: #000000;
  --secondary: #2C2C2E;
  --secondary-foreground: #F5F5F7;
  --muted: #1C1C1E;
  --muted-foreground: #98989D;
  --accent: #062A30;
  --accent-foreground: #7FF0FF;
  --destructive: #FF6B78;
  --destructive-foreground: #000000;
  --border: #2C2C2E;
  --input: #707076;
  --ring: #00E1FE;
  --chart-1: #00E1FE;
  --chart-2: #4FD0E4;
  --chart-3: #2A9FB2;
  --chart-4: #1C6F7D;
  --chart-5: #10434C;
  --link: #00E1FE;
  --mark: #00E1FE;
  --success: #30D5A0;
  --success-foreground: #000000;
  --warning: #FFB020;
  --warning-foreground: #000000;
  --warning-soft: #3A2A10;
  --warning-soft-foreground: #FFC56B;
  --deal: #FF6B78;
  --deal-foreground: #000000;
  --glass: rgba(0, 0, 0, 0.72);
  --shadow-node: 0 0 0 1px rgba(255, 255, 255, 0.07), 0 16px 40px -12px rgba(0, 0, 0, 0.8);
  --shadow-lift: 0 0 0 1px rgba(255, 255, 255, 0.12), 0 28px 60px -16px rgba(0, 0, 0, 0.9);
}

/* Tema escuro: preferência do sistema, quando o usuário não escolheu */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --brand-ciano: #00E1FE;
    --brand-ciano-profundo: #006E80;
    --brand-preto: #000000;
    --brand-branco: #FFFFFF;
    --background: #000000;
    --foreground: #F5F5F7;
    --surface: #1A1A1C;
    --surface-foreground: #F5F5F7;
    --card: #242426;
    --card-foreground: #F5F5F7;
    --popover: #1C1C1E;
    --popover-foreground: #F5F5F7;
    --primary: #00E1FE;
    --primary-foreground: #000000;
    --secondary: #2C2C2E;
    --secondary-foreground: #F5F5F7;
    --muted: #1C1C1E;
    --muted-foreground: #98989D;
    --accent: #062A30;
    --accent-foreground: #7FF0FF;
    --destructive: #FF6B78;
    --destructive-foreground: #000000;
    --border: #2C2C2E;
    --input: #707076;
    --ring: #00E1FE;
    --chart-1: #00E1FE;
    --chart-2: #4FD0E4;
    --chart-3: #2A9FB2;
    --chart-4: #1C6F7D;
    --chart-5: #10434C;
    --link: #00E1FE;
    --mark: #00E1FE;
    --success: #30D5A0;
    --success-foreground: #000000;
    --warning: #FFB020;
    --warning-foreground: #000000;
    --warning-soft: #3A2A10;
    --warning-soft-foreground: #FFC56B;
    --deal: #FF6B78;
    --deal-foreground: #000000;
    --glass: rgba(0, 0, 0, 0.72);
    --shadow-node: 0 0 0 1px rgba(255, 255, 255, 0.07), 0 16px 40px -12px rgba(0, 0, 0, 0.8);
    --shadow-lift: 0 0 0 1px rgba(255, 255, 255, 0.12), 0 28px 60px -16px rgba(0, 0, 0, 0.9);
  }
}