/* ClawHunt v5 "Tide Pool" — design tokens.
   Light = "Low tide" (default), dark = "Night dive" ([data-theme="dark"]).
   Components read only semantic tokens (--bg, --ink, --line…), never palette names. */

@font-face {
  font-family: "Mona Sans";
  src: url("../fonts/mona-sans-latin-standard-normal.woff2") format("woff2-variations");
  font-weight: 200 900;
  font-stretch: 75% 125%;
  font-style: normal;
  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: "Mona Sans";
  src: url("../fonts/mona-sans-latin-ext-standard-normal.woff2") format("woff2-variations");
  font-weight: 200 900;
  font-stretch: 75% 125%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, 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: "Mona Sans";
  src: url("../fonts/mona-sans-latin-standard-italic.woff2") format("woff2-variations");
  font-weight: 200 900;
  font-stretch: 75% 125%;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0000-00FF, U+2000-206F;
}
@font-face {
  font-family: "Newsreader";
  src: url("../fonts/newsreader-latin-opsz-normal.woff2") format("woff2-variations");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212;
}
@font-face {
  font-family: "Newsreader";
  src: url("../fonts/newsreader-latin-ext-opsz-normal.woff2") format("woff2-variations");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+1E00-1E9F, U+20A0-20C0, U+A720-A7FF;
}
@font-face {
  font-family: "Newsreader";
  src: url("../fonts/newsreader-latin-opsz-italic.woff2") format("woff2-variations");
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0000-00FF, U+2000-206F;
}

:root {
  /* ── palette ─────────────────────────────── */
  --salt: #eef0ef;
  --foam: #ffffff;
  --mist: #e3e8e7;
  --shoal: #cad3d2;
  --abyss: #0b2230;
  --current: #1c6f76;
  --anemone: #f0584f;
  --anemone-ink: #d2433a;
  --lilac: #a897d8;
  /* Brand V1.1: the crab's blue-to-teal gradient and the tagline cyan */
  --brand-blue: #3983ec;
  --brand-azure: #289acc;
  --brand-teal: #15b0ae;
  --brand-cyan: #19c3e6;
  --brand-grad: linear-gradient(105deg, #2f7be0 0%, #2593c8 52%, #1aa3a8 100%);

  /* ── semantic: light ─────────────────────── */
  --bg: var(--salt);
  --bg-deep: #e6eae9;
  --surface: var(--foam);
  --surface-2: var(--mist);
  --surface-glass: rgb(255 255 255 / 0.72);
  --surface-glass-solid: rgb(255 255 255 / 0.88); /* over WebGL: no backdrop-filter */
  --line: var(--shoal);
  --line-soft: #dde3e2;
  --line-strong: #a9b6b5;
  --ink: var(--abyss);
  --ink-2: #4b5d65;
  --ink-3: #586a71; /* AA (≥4.5:1) on foam, salt, bg-deep and mist; still lighter than ink-2 */
  --ink-inverse: #f3f6f6;
  --accent: #2b7ad8; /* brand blue, a step deeper so fills and rings hold on salt */
  --accent-ink: #1c65bf; /* AA on foam, salt and mist */
  --accent-soft: #e1ecfb;
  --link: var(--current);
  --link-hover: #13545a;
  --focus: #1c6f76;
  --data-1: #1c6f76;
  --data-2: #3983ec;
  --data-3: #8f7dce;
  --data-4: #c9a14a;
  --data-5: #5a9ec2;
  --ok: #2a8a5f;
  --ok-soft: #dcefe4;
  --held: #1c6f76;
  --held-soft: #d9ecec;
  --warn: #a86b12;
  --warn-soft: #f6ead3;
  --bad: #c8382f;
  --bad-soft: #f8dedb;
  --btn: var(--abyss);
  --btn-ink: #ffffff;
  --btn-hover: #143447;
  --scrim: rgb(7 22 31 / 0.46);
  --shadow-float: 0 18px 48px -18px rgb(11 34 48 / 0.28), 0 2px 6px rgb(11 34 48 / 0.06);
  --shadow-pop: 0 28px 80px -24px rgb(11 34 48 / 0.42);
  --tank-edge: rgb(255 255 255 / 0.9);
  color-scheme: light;

  /* ── type ─────────────────────────────────── */
  --font-sans: "Mona Sans", "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans CJK SC", "Noto Sans SC", system-ui, sans-serif;
  --font-read: "Newsreader", "Songti SC", "Noto Serif CJK SC", "Source Han Serif SC", Georgia, serif;
  --font-code: ui-monospace, "Cascadia Code", "SF Mono", "JetBrains Mono", Consolas, monospace;

  --fs-display-xl: clamp(4.25rem, 10.4vw, 11.5rem);
  --fs-display: clamp(3rem, 6vw, 6.25rem);
  --fs-h1: clamp(2.4rem, 4vw, 3.75rem);
  --fs-h2: clamp(1.9rem, 2.8vw, 2.75rem);
  --fs-h3: 1.5rem;
  --fs-h4: 1.1875rem;
  --fs-body-l: 1.1875rem;
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-micro: 0.75rem;

  --wdth-display: 78%;
  --wdth-head: 88%;
  --track-display: -0.038em;
  --track-head: -0.022em;

  /* ── space & shape ────────────────────────── */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;
  --section: clamp(88px, 12vw, 176px);
  --section-tight: clamp(56px, 7vw, 96px);
  --margin: clamp(20px, 4vw, 64px);
  --gutter: clamp(16px, 1.8vw, 24px);
  --max: 1360px;
  --measure: 66ch;

  --r-tank: 32px;
  --r-panel: 24px;
  --r-card: 18px;
  --r-control: 14px;
  --r-small: 8px;
  --r-pill: 999px;

  --tank-inset: clamp(8px, 1.1vw, 16px);
  --header-h: 64px;

  /* ── motion ───────────────────────────────── */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --t-fast: 140ms;
  --t-med: 260ms;
  --t-slow: 520ms;
}

[data-theme="dark"] {
  --bg: #07161f;
  --bg-deep: #051119;
  --surface: #0c2230;
  --surface-2: #122b3b;
  --surface-glass: rgb(12 34 48 / 0.72);
  --surface-glass-solid: rgb(10 30 42 / 0.9);
  --line: #1f3a4b;
  --line-soft: #173142;
  --line-strong: #2f5063;
  --ink: #e7eef0;
  --ink-2: #a3b5bc;
  --ink-3: #7d939b;
  --ink-inverse: #07161f;
  --accent: #4c9cf5;
  --accent-ink: #7db8ff;
  --accent-soft: #11294a;
  --link: #6cc6c8;
  --link-hover: #93dcdd;
  --focus: #6cc6c8;
  --data-1: #52b5b9;
  --data-2: #5aa2f7;
  --data-3: #b8a8f5;
  --data-4: #e0bd6a;
  --data-5: #79b8dc;
  --ok: #5cc28f;
  --ok-soft: #12352a;
  --held: #52b5b9;
  --held-soft: #10323a;
  --warn: #e0a84a;
  --warn-soft: #3a2c12;
  --bad: #ff7a70;
  --bad-soft: #3d1a1c;
  --btn: #e7eef0;
  --btn-ink: #07161f;
  --btn-hover: #ffffff;
  --scrim: rgb(2 8 12 / 0.62);
  --shadow-float: 0 18px 48px -16px rgb(0 0 0 / 0.6), 0 1px 0 rgb(255 255 255 / 0.03) inset;
  --shadow-pop: 0 28px 80px -20px rgb(0 0 0 / 0.72);
  --tank-edge: rgb(255 255 255 / 0.08);
  color-scheme: dark;
}