/* MAGU Design System v1 · tokens
   Cores, tipo, forma, vidro, movimento e layout. Carregue primeiro.
   Escuro é o padrão; claro com <html data-theme="light"> ou quando o sistema pede. */

@font-face { font-family: 'Michroma'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/michroma-400.woff2) format('woff2'); }
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-var-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/jetbrains-mono-400-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;

  /* ---------- cor ---------- */
  --bg: #0b0c11;
  --text: #e4e4e9;
  --text-2: rgb(255 255 255 / .64);
  --text-3: rgb(255 255 255 / .44);
  --line: rgb(255 255 255 / .10);
  --core: #2ea8ff;
  --core-hi: #6fc3ff;
  --core-soft: color-mix(in srgb, var(--core) 16%, transparent);
  --on-core: #04121f;
  --warn: #ffc15a;
  --danger: #ff6b6b;
  --ok: #3fd68a;               /* sucesso / "roda no aparelho" (cor fixa) */
  --ok-text: #3fd68a;          /* verde para texto (escurece no claro, contraste AA) */
  --ok-soft: color-mix(in srgb, var(--ok) 16%, transparent);
  --warn-soft: color-mix(in srgb, var(--warn) 16%, transparent);
  --danger-soft: color-mix(in srgb, var(--danger) 14%, transparent);
  --ti: linear-gradient(180deg, #f4f5f7 0%, #c4c8cf 42%, #8d929b 58%, #dfe2e6 100%);

  /* rodapé gustavOS: uma cor por palavra */
  --gs-1: #6fc3ff; --gs-2: #3fd68a; --gs-3: #ffc15a; --gs-4: #ff9b6b; --gs-5: #ff6b6b;
  --gs-6: #2ea8ff; --gs-7: #5ee0d0; --gs-8: #c9d36a; --gs-9: #e4e4e9;

  /* feixes do fundo (lidos pelo field.js) */
  --beam: #9ad7ff;
  --beam-blend: lighter;

  /* ---------- tipografia ---------- */
  --f-text: "SF Pro Text", -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", system-ui, sans-serif;
  --f-display: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", system-ui, sans-serif;
  --f-mono: "SF Mono", ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace;
  --f-brand: "Michroma", var(--f-display);

  --t-hero: clamp(2.6rem, 1.6rem + 4.2vw, 5.6rem);
  --t-h2: clamp(2rem, 1.5rem + 2.2vw, 3.5rem);
  --t-xl: 1.75rem;
  --t-lg: 1.3125rem;
  --t-md: 1.0625rem;
  --t-sm: .875rem;
  --t-xs: .75rem;

  /* ---------- forma ---------- */
  --r: 15px;
  --r-sm: 10px;
  --r-xs: 7px;
  --r-bento: 22px;
  --r-app: 23%;
  --r-pill: 999px;

  /* ---------- layout ---------- */
  --maxw: 1120px;
  --maxw-wide: 1200px;
  --maxw-tool: 1100px;
  --gut: clamp(18px, 4vw, 40px);
  --bar-h: 52px;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);

  /* ---------- vidro ---------- */
  --glass: color-mix(in srgb, #1a1c24 72%, transparent);
  --glass-strong: color-mix(in srgb, #15171e 94%, transparent);
  --glass-line: rgb(255 255 255 / .09);
  --glass-hi: rgb(255 255 255 / .06);
  --blur: saturate(160%) blur(22px);
  --shadow: 0 1px 0 var(--glass-hi) inset, 0 18px 40px -18px rgb(0 0 0 / .6);
  --scrim: color-mix(in srgb, var(--bg) 78%, transparent);

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

/* ---------- tema claro ---------- */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #eceae6;
  --text: #2b2b2e;
  --text-2: rgb(43 43 46 / .74);
  --text-3: rgb(43 43 46 / .50);
  --line: rgb(0 0 0 / .09);
  --core: #0a6fd1;
  --core-hi: #0858a8;
  --core-soft: color-mix(in srgb, var(--core) 10%, transparent);
  --on-core: #ffffff;
  --warn: #9a5d05;
  --danger: #c0271d;
  --ok-text: #17804c;
  --ti: linear-gradient(180deg, #4a4c52 0%, #2b2c30 45%, #6b6e75 60%, #3a3c41 100%);
  --gs-1: #0a6fd1; --gs-2: #1a8a52; --gs-3: #9a5d05; --gs-4: #b4521f; --gs-5: #c0271d;
  --gs-6: #0858a8; --gs-7: #127a70; --gs-8: #6c7414; --gs-9: #2b2b2e;
  --beam: #0a6fd1;
  --beam-blend: source-over;
  --glass: color-mix(in srgb, #ffffff 66%, transparent);
  --glass-strong: color-mix(in srgb, #f7f6f3 95%, transparent);
  --glass-line: rgb(0 0 0 / .08);
  --glass-hi: rgb(255 255 255 / .7);
  --shadow: 0 1px 0 var(--glass-hi) inset, 0 16px 36px -20px rgb(40 36 30 / .35);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --bg: #eceae6;
    --text: #2b2b2e;
    --text-2: rgb(43 43 46 / .74);
    --text-3: rgb(43 43 46 / .50);
    --line: rgb(0 0 0 / .09);
    --core: #0a6fd1;
    --core-hi: #0858a8;
    --core-soft: color-mix(in srgb, var(--core) 10%, transparent);
    --on-core: #ffffff;
    --warn: #9a5d05;
    --danger: #c0271d;
    --ok-text: #17804c;
    --ti: linear-gradient(180deg, #4a4c52 0%, #2b2c30 45%, #6b6e75 60%, #3a3c41 100%);
    --gs-1: #0a6fd1; --gs-2: #1a8a52; --gs-3: #9a5d05; --gs-4: #b4521f; --gs-5: #c0271d;
    --gs-6: #0858a8; --gs-7: #127a70; --gs-8: #6c7414; --gs-9: #2b2b2e;
    --beam: #0a6fd1;
    --beam-blend: source-over;
    --glass: color-mix(in srgb, #ffffff 66%, transparent);
    --glass-strong: color-mix(in srgb, #f7f6f3 95%, transparent);
    --glass-line: rgb(0 0 0 / .08);
    --glass-hi: rgb(255 255 255 / .7);
    --shadow: 0 1px 0 var(--glass-hi) inset, 0 16px 36px -20px rgb(40 36 30 / .35);
  }
}

/* transparência reduzida: vidro vira material sólido */
@media (prefers-reduced-transparency: reduce) {
  :root {
    --glass: var(--glass-strong);
    --blur: none;
  }
}