/* ==========================================================================
   Tidepool · design tokens
   Palette logic: one hue + one accent hue drive every surface. Switch
   palettes with [data-palette] on <html>; switch modes with .dark.
   ========================================================================== */

:root {
  --hue: 195;
  --accent-hue: 25;

  --font-ui: "LXGW WenKai", -apple-system, BlinkMacSystemFont, "Segoe UI",
    "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --font-article: "LXGW WenKai", "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", sans-serif;
  --font-mono: "JetBrains Mono", "LXGW WenKai Mono", ui-monospace, SFMono-Regular,
    Menlo, Monaco, Consolas, monospace;

  --sidebar-width: 17.5rem;
  --gap: 1.25rem;
  --page-width: 84rem;
  --prose-width: 68rem;
  --edge-offset: max(0rem, calc((100vw - var(--page-width)) / 2));
  --container-pad: clamp(1rem, 3vw, 2rem);
  --nav-height: 4.25rem;

  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-full: 999px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 0.28s;
  --dur-fast: 0.16s;

  --page-bg: oklch(0.965 0.012 var(--hue));
  --page-bg-deep: oklch(0.935 0.022 var(--hue));
  --card-bg: oklch(0.995 0.004 var(--hue));
  --card-bg-soft: oklch(0.972 0.012 var(--hue));
  --card-bg-glass: oklch(0.995 0.004 var(--hue) / 0.78);

  --border: oklch(0.9 0.018 var(--hue));
  --border-strong: oklch(0.84 0.025 var(--hue));
  --divider: oklch(0.9 0.018 var(--hue) / 0.72);

  --text: oklch(0.28 0.022 var(--hue));
  --text-soft: oklch(0.45 0.022 var(--hue));
  --text-mute: oklch(0.6 0.02 var(--hue));
  --text-faint: oklch(0.7 0.018 var(--hue));

  --primary: oklch(0.62 0.13 var(--hue));
  --primary-strong: oklch(0.5 0.14 var(--hue));
  --primary-soft: oklch(0.94 0.035 var(--hue));
  --primary-faint: oklch(0.965 0.02 var(--hue));
  --primary-contrast: oklch(0.99 0.006 var(--hue));

  --accent: oklch(0.68 0.16 var(--accent-hue));
  --accent-strong: oklch(0.57 0.17 var(--accent-hue));
  --accent-soft: oklch(0.95 0.035 var(--accent-hue));

  --code-bg: oklch(0.19 0.022 var(--hue));
  --code-text: oklch(0.92 0.015 var(--hue));
  --code-mute: oklch(0.64 0.02 var(--hue));

  --heat-0: oklch(0.93 0.015 var(--hue));
  --heat-1: oklch(0.86 0.045 var(--hue));
  --heat-2: oklch(0.77 0.08 var(--hue));
  --heat-3: oklch(0.67 0.11 var(--hue));
  --heat-4: oklch(0.57 0.13 var(--hue));

  --shadow-xs: 0 1px 2px oklch(0.24 0.03 var(--hue) / 0.05);
  --shadow-sm: 0 4px 14px -6px oklch(0.24 0.04 var(--hue) / 0.12);
  --shadow-md: 0 18px 44px -22px oklch(0.24 0.05 var(--hue) / 0.28);
  --shadow-lg: 0 32px 80px -32px oklch(0.24 0.06 var(--hue) / 0.38);
  --glow: 0 0 0 4px oklch(0.62 0.13 var(--hue) / 0.14);
}

html.dark {
  --page-bg: oklch(0.165 0.022 var(--hue));
  --page-bg-deep: oklch(0.13 0.022 var(--hue));
  --card-bg: oklch(0.218 0.024 var(--hue));
  --card-bg-soft: oklch(0.258 0.028 var(--hue));
  --card-bg-glass: oklch(0.218 0.024 var(--hue) / 0.8);

  --border: oklch(0.32 0.03 var(--hue));
  --border-strong: oklch(0.38 0.04 var(--hue));
  --divider: oklch(0.32 0.03 var(--hue) / 0.75);

  --text: oklch(0.93 0.012 var(--hue));
  --text-soft: oklch(0.82 0.016 var(--hue));
  --text-mute: oklch(0.69 0.02 var(--hue));
  --text-faint: oklch(0.58 0.02 var(--hue));

  --primary: oklch(0.76 0.13 var(--hue));
  --primary-strong: oklch(0.84 0.11 var(--hue));
  --primary-soft: oklch(0.3 0.05 var(--hue));
  --primary-faint: oklch(0.24 0.03 var(--hue));
  --primary-contrast: oklch(0.16 0.02 var(--hue));

  --accent: oklch(0.76 0.15 var(--accent-hue));
  --accent-strong: oklch(0.84 0.13 var(--accent-hue));
  --accent-soft: oklch(0.3 0.055 var(--accent-hue));

  --code-bg: oklch(0.15 0.018 var(--hue));
  --code-text: oklch(0.9 0.014 var(--hue));
  --code-mute: oklch(0.6 0.02 var(--hue));

  --heat-0: oklch(0.28 0.02 var(--hue));
  --heat-1: oklch(0.38 0.045 var(--hue));
  --heat-2: oklch(0.5 0.08 var(--hue));
  --heat-3: oklch(0.62 0.11 var(--hue));
  --heat-4: oklch(0.74 0.13 var(--hue));

  --shadow-xs: 0 1px 2px oklch(0 0 0 / 0.2);
  --shadow-sm: 0 6px 18px -8px oklch(0 0 0 / 0.45);
  --shadow-md: 0 20px 48px -22px oklch(0 0 0 / 0.62);
  --shadow-lg: 0 36px 90px -36px oklch(0 0 0 / 0.72);
  --glow: 0 0 0 4px oklch(0.76 0.13 var(--hue) / 0.18);
}

html[data-palette="tide"] {
  --hue: 195;
  --accent-hue: 24;
}

html[data-palette="abyss"] {
  --hue: 258;
  --accent-hue: 332;
}

html[data-palette="coral"] {
  --hue: 28;
  --accent-hue: 196;
}

html[data-palette="kelp"] {
  --hue: 152;
  --accent-hue: 46;
}