/* Shenanigans design tokens. Dark-first; light theme via [data-theme="light"].
   Identity: a linkpearl in a night sea, plus a coral grin of mischief.
   Use the tokens, never raw hex, in feature CSS. */
:root {
  /* type */
  --font-display: 'Gloock', 'Georgia', serif;
  --font-body: 'Atkinson Hyperlegible', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'Spline Sans Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  --fs-xs: 0.75rem;   /* 12 */
  --fs-sm: 0.875rem;  /* 14 */
  --fs-md: 1rem;      /* 16 */
  --fs-lg: 1.125rem;  /* 18 */
  --fs-xl: 1.5rem;    /* 24 */
  --fs-2xl: 2rem;     /* 32 */
  --fs-3xl: clamp(2.25rem, 5vw, 3.5rem);

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

  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  --sidebar-w: 252px;
  --topbar-h: 60px;
  --content-max: 1180px;

  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur: 180ms;

  /* palette - dark (default) */
  --bg: #060b18;
  --bg-2: #0a1224;
  --surface: #0f1a31;
  --surface-2: #14223f;
  --surface-3: #1b2c50;
  --line: rgba(160, 185, 235, 0.12);
  --line-strong: rgba(160, 185, 235, 0.24);
  --text: #e8edf7;
  --text-2: #aab5cf;
  --text-3: #7584a6;

  --accent: #ff7a59;          /* coral: the mischievous grin */
  --accent-ink: #1a0a05;      /* text on accent */
  --accent-soft: rgba(255, 122, 89, 0.14);
  --gold: #f2c35b;
  --gold-soft: rgba(242, 195, 91, 0.14);
  --sea: #4fa3d9;
  --sea-soft: rgba(79, 163, 217, 0.14);

  --ok: #5ccf9c;
  --ok-soft: rgba(92, 207, 156, 0.14);
  --warn: #f2c35b;
  --danger: #ff5f73;
  --danger-soft: rgba(255, 95, 115, 0.14);

  /* nacre: iridescent pearl. Use sparingly (logo, active marker, highlights). */
  --pearl: #ece7f6;
  --nacre: linear-gradient(115deg, #fbe9f1 0%, #e3ecfb 30%, #e4f7ef 55%, #fbf1da 80%, #f4e6fb 100%);
  --nacre-line: linear-gradient(90deg, #f7c6dc, #b9d3f7, #bff0dc, #f6e2a8);

  --shadow-1: 0 1px 2px rgba(0, 0, 0, .35);
  --shadow-2: 0 8px 28px -10px rgba(0, 0, 0, .6), 0 2px 6px rgba(0, 0, 0, .3);
  --focus: 0 0 0 2px var(--bg), 0 0 0 4px var(--gold);

  /* elements (day dots, weather) */
  --el-fire: #ff6a4d;
  --el-earth: #d6a556;
  --el-water: #4c9dff;
  --el-wind: #5ccf86;
  --el-ice: #9fdcff;
  --el-lightning: #c597ff;
  --el-light: #fff1bf;
  --el-dark: #7b68a6;

  color-scheme: dark;
}

[data-theme="light"] {
  --bg: #f3efe6;
  --bg-2: #ebe5d8;
  --surface: #fffdf8;
  --surface-2: #f6f1e7;
  --surface-3: #ece4d4;
  --line: rgba(20, 32, 60, 0.12);
  --line-strong: rgba(20, 32, 60, 0.24);
  --text: #121a2e;
  --text-2: #3e4a66;
  --text-3: #66718b;

  --accent: #c8482a;
  --accent-ink: #ffffff;
  --accent-soft: rgba(200, 72, 42, 0.12);
  --gold: #9a6a08;
  --gold-soft: rgba(176, 124, 16, 0.14);
  --sea: #1f6fa6;
  --sea-soft: rgba(31, 111, 166, 0.12);
  --ok: #1d8a5b;
  --ok-soft: rgba(29, 138, 91, 0.12);
  --warn: #9a6a08;
  --danger: #c22e46;
  --danger-soft: rgba(194, 46, 70, 0.1);

  --pearl: #ffffff;
  --shadow-1: 0 1px 2px rgba(30, 30, 60, .08);
  --shadow-2: 0 10px 30px -12px rgba(30, 30, 60, .25), 0 2px 6px rgba(30, 30, 60, .08);
  --focus: 0 0 0 2px var(--bg), 0 0 0 4px var(--sea);

  --el-light: #c9a227;
  --el-ice: #3fa7d6;

  color-scheme: light;
}