/* ==================== Design Tokens ====================
 * The colour tokens below are the Ocean palette, which is the default.
 * palette.js can replace the colour block at runtime with any of the six
 * palettes; everything downstream reads these variables and never a literal,
 * so a palette swap is a single write and the whole site follows.
 * ======================================================= */

:root {
  --font-display: "Familjen Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-sans: "Familjen Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --line-height-tight: 1.06;
  --line-height-snug: 1.35;
  --line-height-normal: 1.6;
  --line-height-relaxed: 1.72;

  /* --- Ocean, light --- */
  --color-accent: #1450c8;
  --color-accent-strong: #0d3a96;
  --color-accent-soft: rgba(20, 80, 200, 0.1);
  --color-on-accent: #ffffff;

  --color-background: #fcfdfe;
  --color-surface: #f5f8fc;
  --color-surface-2: #e9eff8;
  --color-overlay: rgba(252, 253, 254, 0.88);

  --color-text: #121b21;
  --color-text-muted: #4a5157;
  --color-text-subtle: #5f666c;

  --color-border: rgba(18, 27, 33, 0.14);
  --color-border-strong: rgba(18, 27, 33, 0.3);

  --color-danger: #a32b22;
  --color-success: #1f6b47;

  /* Softer geometry: the earlier 2-3px corners read cold and mechanical. */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 26px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(18, 27, 33, 0.06);
  --shadow-md: 0 6px 22px rgba(18, 27, 33, 0.08);
  --shadow-lg: 0 18px 46px rgba(18, 27, 33, 0.12);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
  --transition-base: 260ms var(--ease);
  --transition-fast: 160ms var(--ease);
  --transition-palette: 420ms ease;

  --z-nav: 1000;
  --z-overlay: 1100;
  --z-toast: 1200;
}

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

  /* --- Ocean, dark --- */
  --color-accent: #7db1f5;
  --color-accent-strong: #a8cbfa;
  --color-accent-soft: rgba(125, 177, 245, 0.1);
  --color-on-accent: #0b111a;

  --color-background: #0d1015;
  --color-surface: #14181f;
  --color-surface-2: #1d242e;
  --color-overlay: rgba(13, 16, 21, 0.88);

  --color-text: #e9eef4;
  --color-text-muted: #a3adb8;
  --color-text-subtle: #858f99;

  --color-border: rgba(233, 238, 244, 0.14);
  --color-border-strong: rgba(233, 238, 244, 0.3);

  --color-danger: #e0827a;
  --color-success: #6fb894;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 6px 22px rgba(0, 0, 0, 0.42);
  --shadow-lg: 0 18px 46px rgba(0, 0, 0, 0.55);
}

/* Colour changes are animated so a palette swap reads as one motion rather
   than a flash. Structural properties are deliberately excluded. */
body,
.navbar,
.surface-card,
.project-accordion-item,
.stat-tile,
.palette-dock {
  transition:
    background-color var(--transition-palette),
    border-color var(--transition-palette),
    color var(--transition-palette);
}