@font-face{
  font-family:"Sora4Fans";
  src:url("/static/fonts/sora-var-latin-ext.woff2") format("woff2");
  font-weight:400 800;
  font-style:normal;
  font-display:optional;
  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;
}

@font-face{
  font-family:"Sora4Fans";
  src:url("/static/fonts/sora-var-latin.woff2") format("woff2");
  font-weight:400 800;
  font-style:normal;
  font-display:optional;
  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:"Manrope4Fans";
  src:url("/static/fonts/manrope-var-latin-ext.woff2") format("woff2");
  font-weight:400 800;
  font-style:normal;
  font-display:optional;
  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;
}

@font-face{
  font-family:"Manrope4Fans";
  src:url("/static/fonts/manrope-var-latin.woff2") format("woff2");
  font-weight:400 800;
  font-style:normal;
  font-display:optional;
  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;
}

/* Theme tokens (single source of truth)
   - Existing tokens kept for legacy support (--bg, --panel, etc.)
   - New tokens enforce typography, spacing rhythm, and restrained motion.
*/

:root{
  /* typography */
  --font-display:"Sora4Fans","Trebuchet MS","Segoe UI",sans-serif;
  --font-body:"Manrope4Fans","Segoe UI","Helvetica Neue",Arial,sans-serif;
  --type-micro:.75rem;
  --type-caption:.75rem;
  --type-control:.8125rem;
  --type-meta:.875rem;
  --type-secondary:.9375rem;
  --type-body:1rem;
  --type-card-title:1rem;
  --type-feed-title:1.0625rem;
  --type-panel-title:1.125rem;
  --type-page-title:1.375rem;
  --type-page-title-lg:1.625rem;
  --type-article-title:2rem;
  --type-article-title-sm:1.625rem;
  --type-score:2rem;
  --weight-regular:400;
  --weight-medium:500;
  --weight-semibold:600;
  --weight-bold:700;
  --weight-heavy:800;
  --leading-solid:1;
  --leading-tight:1.16;
  --leading-heading:1.22;
  --leading-control:1.3;
  --leading-body:1.52;
  --leading-reading:1.72;
  --measure-readable:68ch;
  --measure-article:72ch;
  --font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  /* rhythm — spacing on a 2px (0.125rem) grid; snap raw values to a step */
  --space-1:0.25rem;
  --space-2:0.375rem;
  --space-3:0.5rem;
  --space-4:0.625rem;
  --space-5:0.75rem;
  --space-6:0.875rem;
  --space-7:1rem;
  --space-8:1.125rem;
  --space-9:1.25rem;
  --space-10:1.5rem;
  --radius-xs:0.375rem;
  --radius-sm:0.625rem;
  --radius-md:0.875rem;
  --radius-lg:1.125rem;
  --radius-pill:62.4375rem;
  --motion-fast:.14s;
  --motion-base:.2s;
  --motion-slow:.32s;

  /* surfaces */
  --bg:#F5F7FB;
  --panel:#FFFFFF;
  --surface-0: var(--bg);
  --surface-1: var(--panel);
  --surface-2:#EEF1F7;
  --app-shell-bg:#F3F6FA;

  /* brand system: square logo blue + fan-energy green */
  --brand-blue:#0A64BD;
  --brand-green:#4FB12F;
  --brand-blue-ink:#064C94;
  --brand-green-ink:#2F7F21;
  --brand-blue-soft: rgba(10,100,189,.12);
  --brand-green-soft: rgba(79,177,47,.14);
  --brand-earned:#B8A24A;
  --brand-earned-soft: rgba(184,162,74,.16);

  /* text */
  --text:#101826;
  --muted: rgba(16,24,38,.68);

  /* borders + chips */
  --line: rgba(16,24,38,.14);
  --chip: rgba(16,24,38,.05);
  --chip-active: var(--text);
  --chip-active-bg: color-mix(in srgb, var(--brand-blue) 13%, var(--surface-1));

  /* accent */
  --accent: var(--brand-blue);
  --accent-2: var(--brand-green);
  --accent-contrast:#FFFFFF;

  /* semantic + interactive */
  --success: var(--brand-green-ink);
  --danger:#b3261e;
  --warning:#b45309;
  --info: var(--brand-blue);

  --success-bg: color-mix(in srgb, var(--brand-green) 14%, var(--surface-1));
  --danger-bg:#fdecec;
  --warning-bg:#fff7ed;
  --info-bg: color-mix(in srgb, var(--brand-blue) 10%, var(--surface-1));

  --link: var(--accent);
  --link-hover: var(--brand-blue-ink);
  --focus-ring: color-mix(in srgb, var(--brand-blue) 28%, transparent);

  /* misc */
  --lock-bg: rgba(0,0,0,.55);

  /* legacy background glow tokens kept for older feature CSS; app shell stays flat. */
  --bg-glow-1: transparent;
  --bg-glow-2: transparent;

  /* Signal Field identity */
  --signal-line: color-mix(in srgb, var(--brand-blue) 23%, transparent);
  --signal-line-soft: color-mix(in srgb, var(--brand-blue) 10%, transparent);
  --signal-pulse: color-mix(in srgb, var(--brand-green) 74%, var(--text));
  --signal-pulse-soft: color-mix(in srgb, var(--brand-green) 18%, transparent);
  --signal-earned: var(--brand-earned);
  --signal-sweep-duration: 680ms;
  --signal-ease: cubic-bezier(.22, 1, .36, 1);

  --code-bg:#0F172A;
  --code-text:#EAF0FF;
  --code-comment: rgba(234,240,255,.55);
  --code-keyword: #7DB0FF;
  --code-string: #8CE99A;
  --code-number: #FFD166;
  --code-title: #C3A6FF;
  --code-built_in: #7EE7F4;
  --code-meta: rgba(234,240,255,.72);

  --toast-bg: var(--text);
  --toast-text: var(--panel);

  /* shadows: default app surfaces stay flat; use borders/background only */
  --shadow-sm: none;
  --shadow-md: none;
}

html[data-theme="light"]{ color-scheme: light; }

html[data-theme="dark"]{
  color-scheme: dark;

  /* surfaces */
  --bg:#0C111B;
  --panel:#121927;
  --surface-0: var(--bg);
  --surface-1: var(--panel);
  --surface-2:#182133;
  --app-shell-bg:#0A111B;

  --brand-blue:#4B9BFF;
  --brand-green:#6BD852;
  --brand-blue-ink:#BBD9FF;
  --brand-green-ink:#C6F6B9;
  --brand-blue-soft: rgba(75,155,255,.18);
  --brand-green-soft: rgba(107,216,82,.16);
  --brand-earned:#D6C46A;
  --brand-earned-soft: rgba(214,196,106,.14);

  /* text */
  --text:#E6EDF8;
  --muted: rgba(230,237,248,.72);

  /* borders + chips */
  --line: rgba(230,237,248,.12);
  --chip: rgba(230,237,248,.06);
  --chip-active: var(--text);
  --chip-active-bg: color-mix(in srgb, var(--brand-blue) 18%, transparent);

  /* semantic backgrounds tuned for dark */
  --success-bg: color-mix(in srgb, var(--brand-green) 16%, transparent);
  --danger-bg: rgba(179,38,30,.15);
  --warning-bg: rgba(180,83,9,.18);
  --info-bg: color-mix(in srgb, var(--brand-blue) 16%, transparent);

  --focus-ring: rgba(115,170,255,.28);
  --link: var(--brand-blue);
  --link-hover:var(--brand-blue-ink);

  --code-bg:#0A0D14;
  --code-text:#EAF0FF;
  --code-comment: rgba(234,240,255,.55);
  --code-keyword: #A6C9FF;
  --code-string: #95F2C1;
  --code-number: #FFD98A;
  --code-title: #D7C0FF;
  --code-built_in: #8CF0FF;
  --code-meta: rgba(234,240,255,.78);

  --lock-bg: rgba(0,0,0,.65);

  /* legacy background glow tokens kept for older feature CSS; app shell stays flat. */
  --bg-glow-1: transparent;
  --bg-glow-2: transparent;

  --signal-line: color-mix(in srgb, var(--brand-blue) 30%, transparent);
  --signal-line-soft: color-mix(in srgb, var(--brand-blue) 13%, transparent);
  --signal-pulse: color-mix(in srgb, var(--brand-green) 78%, var(--text));
  --signal-pulse-soft: color-mix(in srgb, var(--brand-green) 18%, transparent);
  --signal-earned: var(--brand-earned);

  --toast-bg: rgba(234,240,255,.92);
  --toast-text: #0B0F17;

  /* shadows: default app surfaces stay flat; use borders/background only */
  --shadow-sm: none;
  --shadow-md: none;
}