/* ============================================================
   GAMELINK design tokens
   Dark is the default; [data-theme="light"] swaps the surfaces.
   Surfaces are translucent glass: the ambient colour blend behind the
   app (css/ambience.css) glows through every card, panel and bar.
   The accent can be changed in Settings → Appearance (JS sets --accent;
   --accent-2 is the same colour turned ~45° round the wheel, so every
   gradient glows whatever accent you pick).
   ============================================================ */
:root {
  color-scheme: dark;

  /* type */
  --font-ui: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Space Grotesk', 'Manrope', system-ui, sans-serif;
  --font-mono: ui-monospace, 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
  --fs-scale: 1;   /* Settings → Appearance → Text size */
  /* a crisp, compact scale (the widget rail sets the tone: 14px titles, 12px rows) */
  --fs-2xs: calc(10.5px * var(--fs-scale));
  --fs-xs: calc(11.5px * var(--fs-scale));
  --fs-sm: calc(12.5px * var(--fs-scale));
  --fs-md: calc(13.5px * var(--fs-scale));
  --fs-base: calc(14px * var(--fs-scale));
  --fs-lg: calc(15.5px * var(--fs-scale));
  --fs-xl: calc(18px * var(--fs-scale));
  --fs-2xl: calc(21px * var(--fs-scale));
  --fs-3xl: calc(24px * var(--fs-scale));
  --fs-4xl: calc(30px * var(--fs-scale));
  --lh-tight: 1.2;
  --lh: 1.55;

  /* the canvas under the blend */
  --bg: #08070e;
  /* glass surfaces */
  --bg-sidebar: rgba(13, 11, 24, .58);
  --surface: rgba(23, 20, 38, .58);
  --surface-2: rgba(32, 28, 52, .66);
  --surface-3: rgba(44, 39, 70, .8);
  --surface-sunken: rgba(6, 5, 14, .4);
  --surface-solid: #17142a;   /* things that float over content: menus, modals, toasts */
  --input: rgba(255, 255, 255, .04);
  --overlay: rgba(4, 3, 10, .62);
  --glass: rgba(16, 14, 30, .74);
  --sheen: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, 0) 140px);
  --highlight: inset 0 1px 0 rgba(255, 255, 255, .06);

  /* lines */
  --border: rgba(255, 255, 255, .075);
  --border-strong: rgba(255, 255, 255, .12);
  --border-hover: rgba(255, 255, 255, .2);
  --hover: rgba(255, 255, 255, .05);
  --hover-2: rgba(255, 255, 255, .085);
  --track: rgba(255, 255, 255, .1);

  /* text */
  --text: #f1f0f7;
  --text-body: #d9d8e4;
  --text-2: #a3a2b8;
  --text-3: #85849c;   /* (4.5:1 or better on the surfaces, the faintest text can go) */
  --text-inverse: #0a0a0f;

  /* brand accent (overridable) */
  --accent: #8b5cf6;
  --accent-2: var(--accent);
  --accent-strong: color-mix(in srgb, var(--accent) 82%, #000);
  --accent-hi: color-mix(in srgb, var(--accent) 78%, #fff);
  --accent-text: color-mix(in srgb, var(--accent) 45%, #fff);
  --accent-soft: color-mix(in srgb, var(--accent) 16%, transparent);
  --accent-softer: color-mix(in srgb, var(--accent) 8%, transparent);
  --accent-line: color-mix(in srgb, var(--accent) 45%, transparent);
  --accent-grad: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  --accent-glow: color-mix(in srgb, var(--accent) 55%, transparent);
  --on-accent: #fff;   /* (dark instead on a light accent: prefs.js) */
  --focus: var(--accent);   /* focus rings */

  /* semantic */
  --green: #22c55e;   --green-soft: rgba(34, 197, 94, .14);   --green-text: #4ade80;
  --amber: #f59e0b;   --amber-soft: rgba(245, 158, 11, .14);  --amber-text: #fcd34d;
  --red: #ef4444;     --red-soft: rgba(239, 68, 68, .14);     --red-text: #f87171;
  --blue: #3b82f6;    --blue-soft: rgba(59, 130, 246, .15);   --blue-text: #93c5fd;
  --cyan: #22d3ee;    --pink: #f472b6;    --pink-text: var(--pink);
  --gold: #f5c542;
  --gold-text: var(--gold);   /* (gold words: coins, prices, first place) */
  --presence-online: #22c55e;
  --presence-away: #eab308;
  --presence-dnd: #ef4444;

  /* shape: sharp-edged, like the glass on the profile canvas. Every rectangle takes its corner from one of these, so
     this is the one place to soften them; circles (avatars, dots) are drawn round on their own */
  --r-xs: 0;
  --r-sm: 0;
  --r: 0;
  --r-md: 0;
  --r-lg: 0;
  --r-xl: 0;
  --r-full: 999px;

  /* depth */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow-card: 0 1px 0 rgba(0, 0, 0, .16), 0 12px 28px -22px rgba(0, 0, 0, .6);
  --shadow: 0 14px 34px -14px rgba(0, 0, 0, .7);
  --shadow-lg: 0 30px 70px -24px rgba(0, 0, 0, .8), 0 0 0 1px var(--border);
  --shadow-accent: 0 10px 26px -10px var(--accent-glow);
  --ring: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent);

  /* motion */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --t-fast: 120ms;
  --t: 180ms;
  --t-slow: 320ms;

  /* layout */
  --sidebar-w: 264px;
  --rail-w: 336px;
  --feed-w: 660px;
  --topbar-h: 64px;
  --gutter: 28px;
  --bottom-nav-h: 0px;

  /* z */
  --z-sticky: 20;
  --z-nav: 40;
  --z-drop: 60;
  --z-modal: 80;
  --z-toast: 100;
}
/* the second accent: same lightness, hue turned ~45° (purple → magenta, green → teal…) */
@supports (color: oklch(from red l c h)) {
  :root { --accent-2: oklch(from var(--accent) calc(l + .03) c calc(h + 45)); }
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f3f1fb;
  --bg-sidebar: rgba(255, 255, 255, .62);
  --surface: rgba(255, 255, 255, .66);
  --surface-2: rgba(255, 255, 255, .78);
  --surface-3: rgba(240, 237, 250, .92);
  --surface-sunken: rgba(110, 90, 170, .06);
  --surface-solid: #ffffff;
  --input: rgba(255, 255, 255, .7);
  --overlay: rgba(28, 20, 50, .36);
  --glass: rgba(255, 255, 255, .78);
  --sheen: linear-gradient(180deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0) 140px);
  --highlight: inset 0 1px 0 rgba(255, 255, 255, .9);
  --border: rgba(40, 25, 90, .09);
  --border-strong: rgba(40, 25, 90, .15);
  --border-hover: rgba(40, 25, 90, .24);
  --hover: rgba(40, 25, 90, .045);
  --hover-2: rgba(40, 25, 90, .08);
  --track: rgba(40, 25, 90, .1);
  --text: #16131f;
  --text-body: #2c2839;
  --text-2: #5f5a73;
  --text-3: #6a6580;
  --text-inverse: #fff;
  --accent-text: color-mix(in srgb, var(--accent) 78%, #000);
  --accent-hi: color-mix(in srgb, var(--accent) 88%, #000);   /* (the lit icons and small caps: a light tint of the accent is faint on white) */
  --focus: var(--accent-strong);   /* (a light accent alone is too faint on white) */
  --accent-soft: color-mix(in srgb, var(--accent) 12%, transparent);
  --accent-softer: color-mix(in srgb, var(--accent) 6%, transparent);
  --accent-glow: color-mix(in srgb, var(--accent) 40%, transparent);
  --green-text: #15803d; --amber-text: #b45309; --red-text: #dc2626; --blue-text: #1d4ed8;
  --gold-text: #8f6904;   /* (the gold itself is 1.5:1 on white) */
  --pink-text: #c0266f;   /* (the pink is 2.5:1 on white) */
  --shadow-sm: 0 1px 2px rgba(40, 25, 90, .08);
  --shadow-card: 0 1px 0 rgba(255, 255, 255, .6), 0 12px 28px -22px rgba(60, 40, 120, .28);
  --shadow: 0 14px 34px -14px rgba(60, 40, 120, .25);
  --shadow-lg: 0 30px 70px -24px rgba(60, 40, 120, .32), 0 0 0 1px var(--border);
}

/* density + motion preferences (Settings → Appearance) */
:root[data-density="compact"] {
  --fs-base: calc(13.5px * var(--fs-scale));
  --gutter: 22px;
}
:root[data-reduce-motion="true"] {
  --t-fast: 0ms; --t: 0ms; --t-slow: 0ms;
}
@media (prefers-reduced-motion: reduce) {
  :root:not([data-reduce-motion="false"]) { --t-fast: 0ms; --t: 0ms; --t-slow: 0ms; }
}
/* …and every loop and movement, wherever it's set (name shimmers, profile frames, call pulses, the sign-in page):
   near-instant, once. A spinner keeps turning, so a wait still looks like one */
:root[data-reduce-motion="true"] *:not(.spinner), :root[data-reduce-motion="true"] *:not(.spinner)::before, :root[data-reduce-motion="true"] *:not(.spinner)::after {
  animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important;
}
@media (prefers-reduced-motion: reduce) {
  *:not(.spinner), *:not(.spinner)::before, *:not(.spinner)::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}