/* 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 pelo sistema. */

@font-face{font-family:"Inter";src:url("../fonts/inter-var.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.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Michroma";src:url("../fonts/michroma-400.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);
  --line-2:rgb(255 255 255 / .16);
  --core:#2ea8ff;
  --core-hi:#6fc3ff;
  --core-soft:color-mix(in srgb, var(--core) 16%, transparent);
  --on-core:#04121f;
  --warn:#ffc15a;
  --danger:#ff6b6b;
  --ok:#3fd68a;
  --ti:linear-gradient(180deg,#f4f5f8 0%,#b9bcc6 48%,#e7e8ee 62%,#8d909b 100%);

  /* mockups e superfícies internas (funcionam nos dois temas) */
  --m1:color-mix(in srgb, var(--text) 5%, var(--bg));
  --m2:color-mix(in srgb, var(--text) 9%, var(--bg));
  --m3:color-mix(in srgb, var(--text) 14%, var(--bg));
  --sh:0 1px 0 rgb(255 255 255 / .05) inset, 0 18px 40px -18px rgb(0 0 0 / .7);

  /* ---- vidro ---- */
  --glass:color-mix(in srgb, #1a1c24 62%, transparent);
  --glass-strong:color-mix(in srgb, #15171e 94%, transparent);
  --glass-edge:rgb(255 255 255 / .09);
  --glass-hi:rgb(255 255 255 / .06);
  --glass-blur:saturate(160%) blur(22px);
  --veil:rgb(4 5 8 / .62);

  /* ---- 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","Inter",sans-serif;

  --t-hero:clamp(2.6rem, 1.6rem + 4.4vw, 5.6rem);
  --t-h2:clamp(2rem, 1.4rem + 2.6vw, 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;

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

  /* ---- rodapé gustavOS (uma cor por palavra) ---- */
  --gs-1:#2ea8ff; --gs-2:#6fc3ff; --gs-3:#3fd68a; --gs-4:#ffc15a; --gs-5:#c9ccd6;
  --gs-6:#58d4e8; --gs-7:#9fb4ff; --gs-8:#ff9a6b; --gs-9:#e4e4e9;
}

/* ---- 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);
  --line-2:rgb(0 0 0 / .14);
  --core:#0a6fd1;
  --core-hi:#0858a8;
  --core-soft:color-mix(in srgb, var(--core) 10%, transparent);
  --on-core:#ffffff;
  --warn:#9a5d05;
  --danger:#c0271d;
  --ok:#17834f;
  --ti:linear-gradient(180deg,#5b5d64 0%,#2b2c31 50%,#6b6e76 70%,#2a2b30 100%);
  --sh:0 1px 0 rgb(255 255 255 / .7) inset, 0 16px 34px -20px rgb(40 36 30 / .35);
  --glass:color-mix(in srgb, #ffffff 58%, transparent);
  --glass-strong:color-mix(in srgb, #f7f6f3 95%, transparent);
  --glass-edge:rgb(0 0 0 / .08);
  --glass-hi:rgb(255 255 255 / .7);
  --veil:rgb(40 38 34 / .38);
  --gs-1:#0a6fd1; --gs-2:#0858a8; --gs-3:#17834f; --gs-4:#9a5d05; --gs-5:#55575e;
  --gs-6:#0b7f92; --gs-7:#3d55c4; --gs-8:#b24a17; --gs-9:#2b2b2e;
}
@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);
    --line-2:rgb(0 0 0 / .14);
    --core:#0a6fd1;
    --core-hi:#0858a8;
    --core-soft:color-mix(in srgb, var(--core) 10%, transparent);
    --on-core:#ffffff;
    --warn:#9a5d05;
    --danger:#c0271d;
    --ok:#17834f;
    --ti:linear-gradient(180deg,#5b5d64 0%,#2b2c31 50%,#6b6e76 70%,#2a2b30 100%);
    --sh:0 1px 0 rgb(255 255 255 / .7) inset, 0 16px 34px -20px rgb(40 36 30 / .35);
    --glass:color-mix(in srgb, #ffffff 58%, transparent);
    --glass-strong:color-mix(in srgb, #f7f6f3 95%, transparent);
    --glass-edge:rgb(0 0 0 / .08);
    --glass-hi:rgb(255 255 255 / .7);
    --veil:rgb(40 38 34 / .38);
    --gs-1:#0a6fd1; --gs-2:#0858a8; --gs-3:#17834f; --gs-4:#9a5d05; --gs-5:#55575e;
    --gs-6:#0b7f92; --gs-7:#3d55c4; --gs-8:#b24a17; --gs-9:#2b2b2e;
  }
}

@media (prefers-reduced-motion: reduce){
  :root{--dur:0s}
}