/* Safe Studio — design tokens (Outlaw Red: preto, vermelho e branco).
   Paleta de marca: preto queimado, vermelho de pôster e branco papel. Semânticas (ok/erro) só para feedback.
   Componentes usam tokens de FUNÇÃO (--surface, --text, --accent...), nunca hex direto. */
:root {
  /* Paleta base */
  --obsidian: #0C0B0A;
  --deep-black: #070606;
  --graphite-base: #171514;
  --charcoal: #221F1D;
  --steel: #6F6862;
  --silver: #CFC8C0;
  --ice-white: #F1ECE5;
  --snow-white: #F7F3EE;
  --pure-white: #FFFFFF;

  /* Funções: superfícies */
  --ink: var(--obsidian);              /* fundo principal */
  --deep: var(--deep-black);           /* regiões profundas */
  --graphite: var(--graphite-base);    /* cards, painéis */
  --graphite-2: var(--charcoal);       /* hover, menus */
  --graphite-3: #2D2926;               /* controles sobre superfícies */
  --paper: var(--snow-white);          /* seções claras */
  --paper-2: #E6E8E6;                  /* superfície sobre seção clara */
  --paper-ink: #0B0C0E;                /* texto sobre seção clara */
  --paper-muted: #55595E;              /* texto secundário sobre seção clara */
  --paper-line: rgba(11, 12, 14, .12);

  /* Funções: texto */
  --bone: var(--ice-white);            /* texto principal sobre escuro */
  --ash: #A8A19A;                      /* secundário (7.2:1 sobre --ink) */
  --ash-2: var(--steel);               /* terciário, metadados */

  /* Destaque: vermelho de pôster de faroeste */
  --red: #D3222C;
  --red-hi: #EA3B44;
  --red-deep: #8E1219;
  --accent: var(--red);                /* CTA principal, indicador ativo, preço promocional */
  --accent-hi: var(--red-hi);
  --accent-ink: #FFFFFF;               /* texto sobre --accent (4.9:1) */
  --accent-soft: rgba(211, 34, 44, .12);
  --accent-line: rgba(211, 34, 44, .5);
  --ring: rgba(234, 59, 68, .6);
  --silver-line: rgba(207,200,192, .35);

  /* Aliases de compatibilidade (componentes antigos) */
  --signal: var(--accent);
  --signal-hi: var(--accent-hi);
  --signal-ink: var(--accent-ink);

  /* Semânticas: apenas feedback */
  --ok: #7FB59A;
  --error: #E07A7A;
  --warn: #D9B36A;

  /* Linhas e véus */
  --line: rgba(241, 236, 229, .08);
  --line-2: rgba(241, 236, 229, .16);
  --veil: rgba(8, 9, 11, .72);
  --glass: rgba(10, 11, 13, .62);

  /* Tipo */
  --font-display: "Bricolage Grotesque", "Geist", system-ui, sans-serif;
  --font-body: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Títulos: Teko 600 (Google Fonts, OFL: uso comercial e web livres). Condensada, quadrada e angular. */
  --font-title: "Teko", "Anton", Impact, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  --fs-12: .75rem;
  --fs-14: .875rem;
  --fs-16: 1rem;
  --fs-20: 1.25rem;
  --fs-25: 1.5625rem;
  --fs-31: 1.953rem;
  --fs-39: 2.441rem;
  --fs-display-s: clamp(2rem, 1.3rem + 2.8vw, 3.8rem);
  --fs-display: clamp(2.6rem, 1.4rem + 4.8vw, 6rem);
  --fs-mega: clamp(3rem, 1rem + 7.4vw, 8.4rem);

  --lh-tight: 1.02;
  --lh-head: 1.12;
  --lh-body: 1.6;

  /* Espaço (base 4) */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 144px;

  --gutter: 24px;
  --page-pad: 16px;
  --max: 1320px;
  --nav-h: 64px;
  --bar-h: 36px;

  /* Raio por hierarquia */
  --r-1: 4px;
  --r-2: 10px;
  --r-3: 18px;
  --r-4: 28px;
  --r-pill: 999px;

  /* Profundidade */
  --shadow-lift: 0 30px 60px -20px rgba(0, 0, 0, .75), 0 0 0 1px var(--line);
  --shadow-pop: 0 18px 40px -12px rgba(0, 0, 0, .8);
  --glow-cold: 0 0 0 1px rgba(241,236,229,.06), 0 40px 120px -40px rgba(211,34,44,.28);

  /* Movimento */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-inout: cubic-bezier(.65, 0, .35, 1);
  --dur-1: 160ms;
  --dur-2: 320ms;
  --dur-3: 640ms;

  /* Sazonal (Winter) */
  --snow-opacity: .55;
  --frost: rgba(247, 243, 238, .92);

  --z-bar: 40; --z-nav: 50; --z-mega: 55; --z-buybar: 45; --z-drawer: 70; --z-modal: 80; --z-toast: 90;
}

@media (min-width: 768px) { :root { --page-pad: 28px; } }
@media (min-width: 1100px) { :root { --page-pad: 40px; --nav-h: 72px; } }

@media (prefers-reduced-motion: reduce) {
  :root { --dur-1: .01ms; --dur-2: .01ms; --dur-3: .01ms; }
}