/* ============================================================
   MakerGest · estilos
   Layout: casca de vidro fosco sobre fundo em gradiente (identidade do Figma "Sistema");
   no celular, topo fixo + navegação inferior + folhas que sobem de baixo.
   Escuro por padrão; tema claro por preferência do sistema ou escolha na conta.
   ============================================================ */
:root {
  --accent: #def080; --accent-rgb: 222 240 128;
  --ink-d: #def080; --ink-l: #56650c;
  --accent-ink: var(--ink-d);
  --accent-hover: color-mix(in srgb, var(--accent) 78%, #ffffff);
  --on-accent: #141414;
  --bg: #08121c;
  --bg-img: radial-gradient(120% 75% at 50% -12%, #a3b4c6 0%, #5a7894 18%, #24405a 42%, #0d1e2e 68%, #07111a 100%);
  --veil: rgb(0 0 0 / .42);
  --ink: 255 255 255; --shade: 0 0 0;
  --glass-rgb: 40 40 40; --deep-rgb: 20 20 20; --sheet-rgb: 24 26 28;
  --night: #141414; --surface: #222222; --surface-hover: #2c2c2c; --menu: #1c1d1f;
  --heading: #ffffff; --body: #d4d4d4; --caption: #a9a9a9; --nav: #d9d9d9; --disabled: #6f6f6f;
  --pill-bg: #ffffff; --pill-fg: #222222; --pill-hover: #ececec;
  --glass: rgb(var(--glass-rgb) / .25); --glass-strong: rgb(var(--glass-rgb) / .5);
  --glass-active: rgb(var(--ink) / .1); --glass-border: rgb(var(--ink) / .2);
  --hair: rgb(var(--ink) / .08); --field: rgb(var(--ink) / .06); --field-border: rgb(var(--ink) / .14);
  --donut-gap: #1b1c1d; --d2: #ffffff; --d3: #c9c9c9; --d4: #8f8f8f; --d5: #5c5c5c;
  --red: #ff7a6b; --red-rgb: 255 122 107; --amber: #f5b86a; --amber-rgb: 245 184 106;
  --font: "Onest", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --bnav-h: 66px;
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --accent-ink: var(--ink-l);
    --accent-hover: color-mix(in srgb, var(--accent) 86%, #000000);
    --bg: #e7edf2;
    --bg-img: radial-gradient(120% 70% at 50% -12%, #ffffff 0%, #f1f5f8 35%, #e3e9ee 70%, #d9e2e9 100%);
    --veil: transparent;
    --ink: 18 26 34; --shade: 18 26 34;
    --glass-rgb: 255 255 255; --deep-rgb: 226 233 238; --sheet-rgb: 252 253 254;
    --night: #eef2f5; --surface: #e4eaef; --surface-hover: #d8e0e7; --menu: #ffffff;
    --heading: #111820; --body: #3b4650; --caption: #66727d; --nav: #34404a; --disabled: #9aa5ae;
    --pill-bg: #ffffff; --pill-fg: #1d262e; --pill-hover: #f2f5f7;
    --glass: rgb(255 255 255 / .62); --glass-strong: rgb(255 255 255 / .74);
    --glass-active: rgb(var(--ink) / .07); --glass-border: rgb(var(--ink) / .14);
    --hair: rgb(var(--ink) / .1); --field: rgb(255 255 255 / .85); --field-border: rgb(var(--ink) / .18);
    --donut-gap: #f4f7f9; --d2: #26313b; --d3: #5f6c78; --d4: #9aa6b1; --d5: #c9d1d8;
    --red: #c23a2c; --red-rgb: 194 58 44; --amber: #9a5c0f; --amber-rgb: 154 92 15;
    color-scheme: light;
  }
}
:root[data-theme="light"] {
  --accent-ink: var(--ink-l);
  --accent-hover: color-mix(in srgb, var(--accent) 86%, #000000);
  --bg: #e7edf2;
  --bg-img: radial-gradient(120% 70% at 50% -12%, #ffffff 0%, #f1f5f8 35%, #e3e9ee 70%, #d9e2e9 100%);
  --veil: transparent;
  --ink: 18 26 34; --shade: 18 26 34;
  --glass-rgb: 255 255 255; --deep-rgb: 226 233 238; --sheet-rgb: 252 253 254;
  --night: #eef2f5; --surface: #e4eaef; --surface-hover: #d8e0e7; --menu: #ffffff;
  --heading: #111820; --body: #3b4650; --caption: #66727d; --nav: #34404a; --disabled: #9aa5ae;
  --pill-bg: #ffffff; --pill-fg: #1d262e; --pill-hover: #f2f5f7;
  --glass: rgb(255 255 255 / .62); --glass-strong: rgb(255 255 255 / .74);
  --glass-active: rgb(var(--ink) / .07); --glass-border: rgb(var(--ink) / .14);
  --hair: rgb(var(--ink) / .1); --field: rgb(255 255 255 / .85); --field-border: rgb(var(--ink) / .18);
  --donut-gap: #f4f7f9; --d2: #26313b; --d3: #5f6c78; --d4: #9aa6b1; --d5: #c9d1d8;
  --red: #c23a2c; --red-rgb: 194 58 44; --amber: #9a5c0f; --amber-rgb: 154 92 15;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --accent-ink: var(--ink-d);
  --accent-hover: color-mix(in srgb, var(--accent) 78%, #ffffff);
  --bg: #08121c;
  --bg-img: radial-gradient(120% 75% at 50% -12%, #a3b4c6 0%, #5a7894 18%, #24405a 42%, #0d1e2e 68%, #07111a 100%);
  --veil: rgb(0 0 0 / .42);
  --ink: 255 255 255; --shade: 0 0 0;
  --glass-rgb: 40 40 40; --deep-rgb: 20 20 20; --sheet-rgb: 24 26 28;
  --night: #141414; --surface: #222222; --surface-hover: #2c2c2c; --menu: #1c1d1f;
  --heading: #ffffff; --body: #d4d4d4; --caption: #a9a9a9; --nav: #d9d9d9; --disabled: #6f6f6f;
  --pill-bg: #ffffff; --pill-fg: #222222; --pill-hover: #ececec;
  --glass: rgb(var(--glass-rgb) / .25); --glass-strong: rgb(var(--glass-rgb) / .5);
  --glass-active: rgb(var(--ink) / .1); --glass-border: rgb(var(--ink) / .2);
  --hair: rgb(var(--ink) / .08); --field: rgb(var(--ink) / .06); --field-border: rgb(var(--ink) / .14);
  --donut-gap: #1b1c1d; --d2: #ffffff; --d3: #c9c9c9; --d4: #8f8f8f; --d5: #5c5c5c;
  --red: #ff7a6b; --red-rgb: 255 122 107; --amber: #f5b86a; --amber-rgb: 245 184 106;
  color-scheme: dark;
}