/* ==========================================================================
   MAGU Design System · tokens.css  (v1 · 03/10/2026)
   Fonte única de cor, tipo, forma, vidro, movimento e layout.
   Tema escuro é o padrão; claro por [data-theme="light"] ou pelo sistema.
   Nunca use cor solta no CSS de um projeto: use estes tokens.
   ========================================================================== */
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 100 800; font-display: swap; src: url(../fonts/jetbrains-mono-var.woff2) format('woff2'); }
/* Inter: fallback auto-hospedado para quem não tem SF Pro (Windows, Android, Linux) */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(../fonts/inter-var.woff2) format('woff2'); }
/* Michroma: só a marca MAGU (wordmark), nunca texto corrido */
@font-face { font-family: 'Michroma'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(../fonts/michroma-400.woff2) format('woff2'); }

/* ── tokens ─────────────────────────────────────────────────────────────── */
:root {
  color-scheme: dark;

  /* forma: sem pontas. Aninhado = raio externo − padding */
  --r: 15px;            /* padrão: cards, botões, campos, janelas, menubar */
  --r-sm: 10px;         /* elementos dentro de algo com --r */
  --r-xs: 7px;          /* miúdos: kbd, selo */
  --r-pill: 999px;      /* só controles circulares/switch */
  --r-bento: 22px;      /* blocos do bento e cards grandes de ferramenta */
  --r-app: 23%;         /* ícone de app (squircle) */

  /* tipo: a pilha da Apple primeiro */
  --f-text: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --f-display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --f-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;
  --f-brand: 'Michroma', 'Eurostile', var(--f-display);

  /* escala (17px = corpo Apple) */
  --t-xs: .75rem; --t-sm: .875rem; --t-md: 1.0625rem; --t-lg: 1.3125rem; --t-xl: 1.75rem; --t-2xl: 2.5rem;
  --t-hero: clamp(2.6rem, 1.2rem + 5.6vw, 5.6rem);
  --t-h2: clamp(2rem, 1.2rem + 3vw, 3.5rem);

  /* cor · escuro */
  --bg: #0b0c11;
  --text: #e4e4e9;             /* branco suavizado: menos ofuscamento no escuro */
  --text-2: rgba(228, 228, 236, .64);
  --text-3: rgba(235, 235, 245, .44);
  --line: rgba(255, 255, 255, .10);
  --core: #2ea8ff;              /* energia: ação principal, foco, "no ar" */
  --core-hi: #6fc3ff;
  --core-ink: #ffffff;
  --core-glow: rgba(46, 168, 255, .45);
  --core-soft: rgba(46, 168, 255, .16);
  --warn: #ffc15a;
  --danger: #ff6b6b;

  /* titânio: a pele da marca (texto metálico, aros, símbolo) */
  --ti: linear-gradient(172deg, #fbfaf8 0%, #d9d5ce 22%, #a39d94 46%, #77726a 54%, #aca69d 66%, #e4e0da 86%, #b3ada4 100%);
  --ti-rim: linear-gradient(145deg, rgba(255,255,255,.62), rgba(214,210,203,.18) 30%, rgba(120,116,108,.10) 55%, rgba(255,255,255,.34) 100%);

  /* vidro líquido (macOS/iOS 27: difusão maior, borda escurecida, especular mais forte) */
  --glass: rgba(30, 32, 42, .50);
  --glass-strong: rgba(22, 24, 32, .74);
  --glass-hi: rgba(255, 255, 255, .30);     /* especular superior */
  --glass-lo: rgba(255, 255, 255, .06);     /* reflexo inferior */
  --glass-edge: rgba(0, 0, 0, .35);         /* borda escurecida */
  --glass-blur: 26px;
  --glass-shadow: 0 1px 1px rgba(0,0,0,.25), 0 12px 40px -8px rgba(0,0,0,.55);
  --sheen: rgba(255, 255, 255, .13);

  /* movimento */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --spring: cubic-bezier(.34, 1.36, .64, 1);

  /* layout */
  --maxw: 1120px;
  --gut: clamp(18px, 4vw, 40px);
  --bar-h: 52px;
  --maxw-wide: 1200px;  /* seções com bento */
  --maxw-tool: 1100px;  /* páginas de ferramenta */
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #eceae6;
  --text: #2b2b2e;
  --text-2: rgba(43, 43, 46, .74);
  --text-3: rgba(29, 29, 31, .50);
  --line: rgba(0, 0, 0, .09);
  --core: #0a6fd1; --core-hi: #0858a8; --core-ink: #fff;
  --core-glow: rgba(10, 111, 209, .28); --core-soft: rgba(10, 111, 209, .10);
  --warn: #9a5d05; --danger: #c0271d;
  --ti: linear-gradient(172deg, #2d2b27 0%, #5b5750 26%, #26241f 52%, #6d6961 78%, #3a3833 100%);
  --ti-rim: linear-gradient(145deg, rgba(255,255,255,.95), rgba(255,255,255,.35) 35%, rgba(160,154,145,.25) 60%, rgba(255,255,255,.85) 100%);
  --glass: rgba(246, 244, 240, .50);
  --glass-strong: rgba(240, 238, 233, .80);
  --glass-hi: rgba(255, 255, 255, .95);
  --glass-lo: rgba(255, 255, 255, .45);
  --glass-edge: rgba(60, 50, 40, .12);
  --glass-shadow: 0 1px 1px rgba(40,30,20,.06), 0 12px 36px -10px rgba(40,30,20,.22);
  --sheen: rgba(255, 255, 255, .55);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --bg: #eceae6; --text: #2b2b2e; --text-2: rgba(43,43,46,.74); --text-3: rgba(29,29,31,.50); --line: rgba(0,0,0,.09);
    --core: #0a6fd1; --core-hi: #0858a8; --core-glow: rgba(10,111,209,.28); --core-soft: rgba(10,111,209,.10);
    --warn: #9a5d05; --danger: #c0271d;
    --ti: linear-gradient(172deg, #2d2b27 0%, #5b5750 26%, #26241f 52%, #6d6961 78%, #3a3833 100%);
    --ti-rim: linear-gradient(145deg, rgba(255,255,255,.95), rgba(255,255,255,.35) 35%, rgba(160,154,145,.25) 60%, rgba(255,255,255,.85) 100%);
    --glass: rgba(246,244,240,.50); --glass-strong: rgba(240,238,233,.80); --glass-hi: rgba(255,255,255,.95);
    --glass-lo: rgba(255,255,255,.45); --glass-edge: rgba(60,50,40,.12);
    --glass-shadow: 0 1px 1px rgba(40,30,20,.06), 0 12px 36px -10px rgba(40,30,20,.22); --sheen: rgba(255,255,255,.55);
  }
}
/* transparência reduzida (acessibilidade): vidro vira material sólido */
@media (prefers-reduced-transparency: reduce) {
  :root { --glass: var(--glass-strong); --glass-blur: 0px; }
}