/* Project Maya UI - tokens.  Dark is the default (<html data-theme="dark">); light via data-theme="light".
   The variable names keep the kit's --st-* prefix so every component reads them unchanged. */

/* Outfit (SIL Open Font License 1.1, serve/web/fonts/OFL.txt): one variable font, weights 100-900 */
@font-face{font-family:"Outfit";src:url("../fonts/outfit-latin-wght.woff2") format("woff2-variations");font-weight:100 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Outfit";src:url("../fonts/outfit-latin-ext-wght.woff2") format("woff2-variations");font-weight:100 900;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  /* type */
  --st-font:"Outfit",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --st-font-mono:ui-monospace,"SF Mono","Cascadia Code",Consolas,"Liberation Mono",monospace;
  --st-fs-xs:12px;  --st-fs-sm:13px; --st-fs-md:14px; --st-fs-base:15px;
  --st-fs-lg:18px;  --st-fs-xl:24px; --st-fs-stat:30px; --st-fs-display:44px; --st-fs-hero:64px;
  --st-fw-regular:400; --st-fw-medium:500; --st-fw-bold:650; --st-fw-black:800;
  --st-lh-tight:1.05; --st-lh-body:1.55;

  /* spacing (4pt) */
  --st-s-1:4px; --st-s-2:8px; --st-s-3:12px; --st-s-4:16px; --st-s-5:20px;
  --st-s-6:24px; --st-s-8:32px; --st-s-10:40px; --st-s-12:48px; --st-s-16:64px;

  /* radius */
  --st-r-sm:8px; --st-r-md:12px; --st-r-lg:18px; --st-r-xl:24px; --st-r-pill:9999px;

  /* motion */
  --st-ease:cubic-bezier(.2,.7,.2,1); --st-dur:160ms;

  /* layout */
  --maya-side:236px;

  /* color - light */
  --st-bg:#f4f4fa;
  --st-bg-glow-1:rgba(109,92,246,.10);
  --st-bg-glow-2:rgba(14,165,233,.08);
  --st-surface:#ffffff;
  --st-surface-2:#f0f0f8;
  --st-surface-3:#e8e8f4;
  --st-line:#e0e1ef;
  --st-line-soft:#ebebf5;
  --st-ink:#14152b;
  --st-ink-soft:#33365a;
  --st-ink-muted:#62668a;
  --st-icon:#33365a;

  --st-accent:#6d5cf6;
  --st-accent-2:#0ea5e9;          /* the second stop of the brand gradient */
  --st-accent-hover:#5a48e8;
  --st-accent-ink:#ffffff;
  --st-accent-tint:#efecff;
  --st-accent-text:#5143d9;
  --st-focus:#6d5cf6;

  --st-info:#0284c7;     --st-info-tint:#e0f2fe;    --st-info-text:#0369a1;
  --st-ok:#10b981;       --st-ok-tint:#e7f8f1;      --st-ok-text:#047857;
  --st-warn:#d97706;     --st-warn-tint:#fef3c7;    --st-warn-text:#92400e;
  --st-danger:#e11d48;   --st-danger-tint:#ffe4e9;  --st-danger-text:#be123c;

  --st-code-bg:#141629;  --st-code-ink:#e4e6f8;

  --st-sh-card:0 1px 2px rgba(20,21,43,.04),0 6px 18px rgba(20,21,43,.04);
  --st-sh-bar:0 18px 40px rgba(20,21,43,.08),0 2px 6px rgba(20,21,43,.05);
  --st-sh-pop:0 18px 48px rgba(20,21,43,.14),0 2px 6px rgba(20,21,43,.06);
  --st-glow:0 8px 24px rgba(109,92,246,.28);
  color-scheme:light;
}

/* color - dark (the default) */
[data-theme="dark"]{
  --st-bg:#090a14;
  --st-bg-glow-1:rgba(124,108,255,.16);
  --st-bg-glow-2:rgba(14,165,233,.10);
  --st-surface:#11132a;
  --st-surface-2:#171a34;
  --st-surface-3:#1e2240;
  --st-line:#252a4a;
  --st-line-soft:#1b1f3a;
  --st-ink:#eceefe;
  --st-ink-soft:#c3c7e6;
  --st-ink-muted:#8a8fb4;
  --st-icon:#c3c7e6;

  --st-accent:#8b7cff;
  --st-accent-2:#38bdf8;
  --st-accent-hover:#a397ff;
  --st-accent-ink:#0b0c18;
  --st-accent-tint:rgba(139,124,255,.15);
  --st-accent-text:#b4aaff;
  --st-focus:#a397ff;

  --st-info:#38bdf8;     --st-info-tint:rgba(56,189,248,.13);  --st-info-text:#7dd3fc;
  --st-ok:#34d399;       --st-ok-tint:rgba(52,211,153,.13);    --st-ok-text:#6ee7b7;
  --st-warn:#fbbf24;     --st-warn-tint:rgba(251,191,36,.13);  --st-warn-text:#fcd34d;
  --st-danger:#fb7185;   --st-danger-tint:rgba(251,113,133,.13);--st-danger-text:#fda4af;

  --st-code-bg:#07080f;  --st-code-ink:#e4e6f8;

  --st-sh-card:0 1px 0 rgba(255,255,255,.03) inset,0 10px 30px rgba(0,0,0,.25);
  --st-sh-bar:0 18px 48px rgba(0,0,0,.45),0 2px 6px rgba(0,0,0,.35);
  --st-sh-pop:0 22px 60px rgba(0,0,0,.6),0 2px 6px rgba(0,0,0,.4);
  --st-glow:0 8px 28px rgba(139,124,255,.35);
  color-scheme:dark;
}
