/* ============================================================
   SCARLET OS NEXT — core/tokens.css
   Fundação de design tokens (DESIGN.md §2).
   Regra de ouro: componentes NUNCA usam cor/tamanho literal.
   Só tokens: --t-* (type), --s* (espaço), --r-* (raio),
   e cores semânticas (--label*, --bg*, --tint, --danger, ...).
   Dark = padrão. Light = variante com contraste AA (>=4.5:1).
   ============================================================ */

:root {
  color-scheme: dark light;

  /* ---------- TIPOGRAFIA ---------- */
  /* Stack SF/system — sem fontes externas, sem CDN, sem @import. */
  --font-ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui,
             "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-rounded: -apple-system, ui-rounded, "SF Pro Rounded", var(--font-ui);
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;

  /* Type ramp fixa (px). Fim dos 43 tamanhos "no olho". */
  --t-large:    34px;   /* Large Title */
  --t-title:    28px;   /* Title 1 */
  --t-title2:   22px;   /* Title 2 */
  --t-title3:   20px;   /* Title 3 */
  --t-body:     17px;   /* Body / Headline */
  --t-callout:  16px;   /* Callout (inputs: evita zoom iOS) */
  --t-subhead:  15px;   /* Subhead — piso p/ texto de decisão */
  --t-footnote: 13px;   /* Footnote */
  --t-caption:  12px;   /* Caption 1 — metadados */
  --t-caption2: 11px;   /* Caption 2 — micro badges */

  --lh-tight: 1.15;
  --lh-snug:  1.28;
  --lh-body:  1.4;

  --w-regular: 400;
  --w-medium:  500;
  --w-semi:    600;
  --w-bold:    700;

  /* ---------- ESPAÇAMENTO (grid 4/8pt) ---------- */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 20px;
  --s6: 24px;
  --s8: 32px;
  --s10: 40px;
  --s12: 48px;

  /* Margem lateral padrão de tela (iOS 16-20px) */
  --gutter: var(--s4);

  /* ---------- RAIOS ---------- */
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-full: 999px;

  /* ---------- MOTION (spring iOS único) ---------- */
  --ease: cubic-bezier(.32, .72, 0, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --t-fast: 140ms;
  --t-med: 240ms;
  --t-slow: 340ms;

  /* ---------- ALVO DE TOQUE ---------- */
  --tap: 44px;

  /* ---------- SAFE AREAS ---------- */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);

  /* ---------- NAVEGAÇÃO ---------- */
  --tabbar-h: 52px;   /* + safe-bottom no componente */
  --rail-w: 240px;    /* rail lateral desktop */
  --nav-h: 44px;      /* barra compacta topo */
  --blur-nav: 22px;   /* liquid glass SÓ na navegação */
}

/* ============================================================
   TEMA ESCURO (padrão) — marca Scarlet: bordô/dourado, sensual.
   Superfícies elevadas nunca preto puro.
   ============================================================ */
:root,
:root[data-theme="dark"] {
  /* Fundo em camadas de profundidade */
  --bg:        #0A0A0D;   /* base mais distante (quase preto) */
  --bg-elev:   #16161C;   /* cards / listas */
  --bg-elev2:  #1F1F27;   /* elementos sobre cards, sheets */
  --bg-inset:  #101014;   /* campos afundados / wells */

  /* Ambiente Scarlet (glow sutil de fundo) */
  --bg-glow:
    radial-gradient(1200px 720px at 78% -10%, rgba(194,18,58,.16), transparent 60%),
    radial-gradient(900px 620px at 6% 110%, rgba(232,183,101,.06), transparent 55%);

  /* Rótulos (texto) — 4 níveis iOS */
  --label:    #F5F5F7;                    /* primário */
  --label-2:  rgba(235,235,245,.62);      /* secundário */
  --label-3:  rgba(235,235,245,.38);      /* terciário */
  --label-4:  rgba(235,235,245,.20);      /* quaternário (placeholders) */

  /* Marca / acento */
  --tint:        #F5224B;   /* escarlate — acento primário */
  --tint-strong: #FF3D63;   /* hover/ativo */
  --tint-deep:   #C2123A;   /* bordô — pressionado / fundos */
  --tint-weak:   rgba(245,34,75,.15);   /* wash de fundo */
  --gold:        #E8B765;   /* dourado — premium / VIP / positivo-lux */
  --gold-deep:   #C9992F;

  /* Semânticos de status */
  --danger:  #FF453A;
  --danger-weak: rgba(255,69,58,.16);
  --ok:      #30D158;
  --ok-weak: rgba(48,209,88,.16);
  --warn:    #FFD60A;
  --warn-weak: rgba(255,214,10,.16);
  --info:    #64D2FF;

  /* Termômetro de lead (frio -> quente) */
  --temp-cold: #64D2FF;
  --temp-warm: #FFD60A;
  --temp-hot:  #FF453A;

  /* Linhas / separadores */
  --separator: rgba(235,235,245,.10);
  --separator-strong: rgba(235,235,245,.16);
  --hairline: rgba(235,235,245,.07);

  /* Interação */
  --hover: rgba(255,255,255,.05);
  --press: rgba(255,255,255,.09);
  --ring: rgba(245,34,75,.55);
  --scrim: rgba(0,0,0,.6);

  /* Glass (navegação) */
  --glass: color-mix(in srgb, var(--bg-elev) 62%, transparent);
  --glass-line: color-mix(in srgb, #ffffff 12%, transparent);

  /* Elevação */
  --shadow-1: 0 1px 2px rgba(0,0,0,.4);
  --shadow-2: 0 8px 28px -12px rgba(0,0,0,.7), 0 2px 8px -4px rgba(0,0,0,.5);
  --shadow-pop: 0 30px 80px -24px rgba(0,0,0,.85);

  /* Skeleton */
  --skeleton-base: var(--bg-elev2);
  --skeleton-sheen: rgba(255,255,255,.06);

  /* theme-color (barra do sistema) sincronizado pelo app.js */
  --theme-color: #0A0A0D;
}

/* ============================================================
   TEMA CLARO (variante) — contraste AA garantido (>=4.5:1).
   ============================================================ */
:root[data-theme="light"] {
  --bg:        #F2F2F7;
  --bg-elev:   #FFFFFF;
  --bg-elev2:  #FFFFFF;
  --bg-inset:  #ECECF1;

  --bg-glow:
    radial-gradient(1100px 680px at 80% -12%, rgba(245,34,75,.08), transparent 58%),
    radial-gradient(820px 560px at 2% 112%, rgba(232,183,101,.10), transparent 52%);

  /* label-2/3 escurecidos p/ passar AA sobre #F2F2F7 (audit P0) */
  --label:    #14141A;
  --label-2:  #4B4D5C;   /* ~7:1  */
  --label-3:  #6B6D7C;   /* ~4.6:1 — piso AA para texto secundário */
  --label-4:  rgba(60,60,67,.30);

  --tint:        #E11340;   /* levemente mais escuro p/ contraste em branco */
  --tint-strong: #F5224B;
  --tint-deep:   #A50E30;
  --tint-weak:   rgba(225,19,64,.10);
  --gold:        #B6892B;   /* dourado escuro legível em branco */
  --gold-deep:   #8A6717;

  --danger:  #D70015;
  --danger-weak: rgba(215,0,21,.10);
  --ok:      #1E9E4A;
  --ok-weak: rgba(30,158,74,.12);
  --warn:    #B9860B;
  --warn-weak: rgba(185,134,11,.14);
  --info:    #0A84C4;

  --temp-cold: #0A84C4;
  --temp-warm: #B9860B;
  --temp-hot:  #D70015;

  --separator: rgba(60,60,67,.18);
  --separator-strong: rgba(60,60,67,.29);
  --hairline: rgba(60,60,67,.12);

  --hover: rgba(0,0,0,.04);
  --press: rgba(0,0,0,.07);
  --ring: rgba(225,19,64,.42);
  --scrim: rgba(20,22,40,.28);

  --glass: color-mix(in srgb, #ffffff 70%, transparent);
  --glass-line: color-mix(in srgb, #000000 8%, transparent);

  --shadow-1: 0 1px 2px rgba(40,30,60,.10);
  --shadow-2: 0 10px 30px -14px rgba(40,30,60,.24), 0 2px 8px -4px rgba(40,30,60,.12);
  --shadow-pop: 0 34px 90px -28px rgba(40,30,60,.4);

  --skeleton-base: #E7E7EE;
  --skeleton-sheen: rgba(0,0,0,.05);

  --theme-color: #F2F2F7;
}

/* Respeitar quem não fixou tema mas prefere claro no sistema.
   O app.js sempre grava data-theme; isto é só fallback pré-boot. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --bg: #F2F2F7; --bg-elev: #FFF; --bg-elev2: #FFF;
    --label: #14141A; --theme-color: #F2F2F7;
  }
}