/* =========================================================================
   STYX — Design tokens v1.0 (web + app webviews)
   Fonte da verdade: STYX_DESIGN_SYSTEM.md. Não invente valores fora daqui.
   Tema padrão = escuro. Tema claro = [data-theme="light"].
   ========================================================================= */

/* fontes: assets/css/fonts.css (no próprio site) */

:root {
  /* ---------- 1. Paleta da marca (nomes oficiais) ---------- */
  --styx-estige: #0A0A0A;   /* preto principal */
  --styx-abismo: #1C1C1C;   /* camadas / superfícies elevadas */
  --styx-sangue: #8A0303;   /* SÓ EM BLOCO. Raro. Ver regras. */
  --styx-margem: #FFFFFF;   /* branco principal */
  --styx-nevoa:  #E6E6E6;   /* fundos claros */
  --styx-obolo:  #8C8C8C;   /* apoio: linhas, ícones inativos, legendas grandes */

  /* ---------- 2. Neutros funcionais (derivados, não são cores de marca) ---------- */
  --n-000: #000000;  /* só para letterbox de vídeo / fundo de bento externo */
  --n-050: #050505;  /* vinheta do hero */
  --n-100: #0A0A0A;  /* = Estige */
  --n-150: #111111;  /* fundo de página entre cards */
  --n-200: #141414;  /* superfície 1 (cards de produto) */
  --n-250: #1C1C1C;  /* = Abismo, superfície 2 */
  --n-300: #2A2A2A;  /* linhas sobre escuro */
  --n-350: #3A3A3A;  /* linhas fortes / bordas hover sobre escuro */
  --n-500: #5E5E5E;  /* texto secundário sobre claro (6,5:1 no branco) */
  --n-550: #8C8C8C;  /* = Óbolo */
  --n-600: #9A9A9A;  /* texto secundário sobre escuro (7:1 no Estige) */
  --n-700: #D6D6D6;  /* texto corrido sobre escuro */
  --n-800: #E2E2E2;  /* linhas sobre claro */
  --n-850: #E6E6E6;  /* = Névoa */
  --n-900: #F2F2F2;  /* superfície clara (fundo de produto, palco) */
  --n-1000: #FFFFFF; /* = Margem */
  --sangue-tint: #F2CFCF; /* texto secundário SOBRE bloco Sangue (7:1) */

  /* ---------- 3. Cromo (só em renders especiais: hero 3D, capas, vídeo) ---------- */
  --styx-cromo: linear-gradient(115deg, #FFFFFF 0%, #9C9C9C 22%, #F4F4F4 38%, #3C3C3C 52%, #DADADA 68%, #6E6E6E 84%, #FFFFFF 100%);
  --styx-cromo-stops: #FFFFFF 0, #9C9C9C .22, #F4F4F4 .38, #3C3C3C .52, #DADADA .68, #6E6E6E .84, #FFFFFF 1;

  /* ---------- 4. Tipografia ---------- */
  --font-serif: "Cormorant Garamond", "Times New Roman", serif;   /* títulos */
  --font-sans:  "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif; /* texto e UI */
  --font-mono:  "Space Mono", ui-monospace, "SFMono-Regular", monospace; /* rótulos, dados, preços */

  /* escala fluida (min @360px → max @1440px) */
  --fs-display: clamp(56px, 2.6rem + 7.4vw, 160px); /* hero */
  --fs-h1:      clamp(44px, 2.4rem + 4.4vw, 104px);
  --fs-h2:      clamp(32px, 1.6rem + 2.4vw, 60px);
  --fs-h3:      clamp(24px, 1.3rem + 0.9vw, 32px);
  --fs-title:   clamp(16px, 0.9rem + 0.4vw, 20px);  /* título de card/seção em sans caixa alta */
  --fs-body-l:  18px;
  --fs-body:    16px;
  --fs-body-s:  14px;
  --fs-ui:      13px;   /* botões, nav */
  --fs-label:   12px;   /* Space Mono rótulos */
  --fs-caption: 11px;   /* Space Mono legendas/metadados */
  --fs-price:   14px;

  --lh-display: 0.92;
  --lh-heading: 1.02;
  --lh-h3: 1.1;
  --lh-body: 1.6;
  --lh-ui: 1;

  --ls-display: -0.02em;
  --ls-heading: -0.01em;
  --ls-title: 0.04em;    /* sans caixa alta */
  --ls-ui: 0.12em;       /* nav e botões caixa alta */
  --ls-label: 0.24em;    /* eyebrow mono */
  --ls-caption: 0.16em;  /* legenda mono */

  /* ---------- 5. Espaço (base 4, ritmo 8) ---------- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px; --sp-5: 24px;
  --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; --sp-10: 128px; --sp-11: 160px;

  /* ---------- 6. Grid ---------- */
  --container: 1440px;
  --gutter: 16px;          /* desktop; 12px em < 768 */
  --margin: clamp(16px, 3.4vw, 48px);
  --bento-gap: 12px;       /* gap entre cards bento (14px no manual @1600) */

  /* ---------- 7. Raios ---------- */
  --r-xs: 4px;     /* botão retangular de compra, inputs no tema claro */
  --r-sm: 10px;    /* chips, thumbs pequenos */
  --r-md: 16px;    /* inputs, cards pequenos, imagens dentro de card */
  --r-lg: 24px;    /* cards de produto, modais */
  --r-xl: 32px;    /* cards bento (desktop). Mobile: 24px */
  --r-pill: 999px; /* botões CTA, tags, nav flutuante */
  --corte: 10px;   /* chanfro do “modo Drop” (clip-path) */

  /* ---------- 8. Bordas ---------- */
  --hairline: 1px;
  --line-dark: 1px solid var(--n-300);
  --line-light: 1px solid var(--n-800);
  --glass-border: 1px solid rgba(255, 255, 255, 0.08);

  /* ---------- 9. Sombras e brilhos ---------- */
  --shadow-1: 0 1px 0 rgba(255,255,255,0.04) inset, 0 8px 24px rgba(0,0,0,0.35);
  --shadow-2: 0 1px 0 rgba(255,255,255,0.06) inset, 0 24px 60px rgba(0,0,0,0.55);
  --shadow-object: 0 30px 60px rgba(0,0,0,0.6); /* sob o símbolo em cromo */
  --shadow-light: 0 18px 40px rgba(0,0,0,0.12);  /* objetos no tema claro */
  --glow-star: 0 0 12px rgba(255,255,255,0.55), 0 0 2px rgba(255,255,255,0.9);

  /* ---------- 10. Vidro ---------- */
  --glass-bg: rgba(255, 255, 255, 0.04);
  --glass-bg-strong: rgba(20, 20, 20, 0.62);
  --glass-blur: blur(24px) saturate(120%);
  --glass-highlight: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0) 40%);

  /* ---------- 11. Movimento ---------- */
  --ease-travessia: cubic-bezier(0.16, 1, 0.3, 1);   /* padrão: saída longa e macia */
  --ease-corte: cubic-bezier(0.7, 0, 0.84, 0);       /* saídas/fechamentos rápidos */
  --ease-mare: cubic-bezier(0.65, 0, 0.35, 1);       /* loops e transições de página */
  --dur-1: 120ms;  /* hover de cor */
  --dur-2: 200ms;  /* pressão, toggles */
  --dur-3: 320ms;  /* menus, drawers */
  --dur-4: 560ms;  /* reveals de seção */
  --dur-5: 900ms;  /* hero, transições de página */
  --stagger: 60ms;

  /* ---------- 12. Camadas ---------- */
  --z-base: 0; --z-raised: 10; --z-sticky: 100; --z-nav: 200; --z-drawer: 300; --z-modal: 400; --z-toast: 500; --z-grain: 900;

  /* ---------- 13. Tema escuro (padrão) — papéis semânticos ---------- */
  --bg: var(--styx-estige);
  --bg-page: var(--n-150);
  --surface-1: var(--n-200);
  --surface-2: var(--styx-abismo);
  --fg: var(--styx-margem);
  --fg-2: var(--n-700);
  --fg-3: var(--n-600);
  --line: var(--n-300);
  --line-strong: var(--n-350);
  --btn-primary-bg: var(--styx-margem);
  --btn-primary-fg: var(--styx-estige);
  --focus: var(--styx-margem);
  --grain-opacity: 0.06;
  color-scheme: dark;
}

[data-theme="light"] {
  --bg: var(--styx-margem);
  --bg-page: var(--styx-margem);
  --surface-1: var(--n-900);
  --surface-2: var(--styx-nevoa);
  --fg: var(--styx-estige);
  --fg-2: #2A2A2A;
  --fg-3: var(--n-500);
  --line: var(--n-800);
  --line-strong: #CFCFCF;
  --btn-primary-bg: var(--styx-estige);
  --btn-primary-fg: var(--styx-margem);
  --focus: var(--styx-estige);
  --grain-opacity: 0.035;
  color-scheme: light;
}

/* Bloco Sangue (modo Drop). Só em superfícies inteiras. */
[data-theme="sangue"] {
  --bg: var(--styx-sangue);
  --bg-page: var(--styx-sangue);
  --surface-1: rgba(0,0,0,0.18);
  --surface-2: rgba(0,0,0,0.28);
  --fg: var(--styx-margem);
  --fg-2: var(--styx-margem);
  --fg-3: var(--sangue-tint);
  --line: rgba(255,255,255,0.22);
  --line-strong: rgba(255,255,255,0.4);
  --btn-primary-bg: var(--styx-margem);
  --btn-primary-fg: var(--styx-sangue);
  --focus: var(--styx-margem);
  color-scheme: dark;
}

@media (max-width: 767px) {
  :root { --gutter: 12px; --bento-gap: 8px; --r-xl: 24px; --r-lg: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-3: 1ms; --dur-4: 1ms; --dur-5: 1ms; --stagger: 0ms; }
}

/* ---------- Estilos-base de texto ---------- */
.t-display { font: 500 var(--fs-display)/var(--lh-display) var(--font-serif); letter-spacing: var(--ls-display); }
.t-h1      { font: 500 var(--fs-h1)/var(--lh-heading) var(--font-serif); letter-spacing: var(--ls-heading); }
.t-h2      { font: 500 var(--fs-h2)/var(--lh-heading) var(--font-serif); letter-spacing: var(--ls-heading); }
.t-h3      { font: italic 500 var(--fs-h3)/var(--lh-h3) var(--font-serif); }
.t-title   { font: 700 var(--fs-title)/1.1 var(--font-sans); letter-spacing: var(--ls-title); text-transform: uppercase; }
.t-sub     { font: 300 var(--fs-title)/1.2 var(--font-sans); letter-spacing: 0.18em; text-transform: uppercase; }
.t-body-l  { font: 400 var(--fs-body-l)/var(--lh-body) var(--font-sans); }
.t-body    { font: 400 var(--fs-body)/var(--lh-body) var(--font-sans); }
.t-body-s  { font: 400 var(--fs-body-s)/1.5 var(--font-sans); }
.t-ui      { font: 500 var(--fs-ui)/1 var(--font-sans); letter-spacing: var(--ls-ui); text-transform: uppercase; }
.t-label   { font: 400 var(--fs-label)/1.3 var(--font-mono); letter-spacing: var(--ls-label); text-transform: uppercase; }
.t-caption { font: 400 var(--fs-caption)/1.4 var(--font-mono); letter-spacing: var(--ls-caption); text-transform: uppercase; }
.t-price   { font: 400 var(--fs-price)/1 var(--font-mono); letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }
.t-display em, .t-h1 em, .t-h2 em { font-style: italic; }