/* PostLake design system — THE single source of truth for the whole site's look.
   Colours, surfaces, borders, light/dark palettes — the marketing site AND the
   in-app dashboard both render from this one file.
   Edit here, then run: npm run design:sync (from api/), then deploy BOTH workers.
   Syncs to website/design-system.css and api/src/app/design-system.ts. */

/* Dark (default) */
:root {
  --bg: #08080c;
  --bg2: #0e0e14;
  --bg3: #161618;
  --card: #0e0e14;
  --text: #f8fafc;
  --muted: #8b97aa;
  --muted2: #b3bccb;
  --accent: #f97316;
  --accent2: #fb923c;
  --accent-ink: #f97316;
  --border: rgba(255, 255, 255, 0.07);
  --border2: rgba(255, 255, 255, 0.12);
  --surface: #161618;
  --surface-2: #1e1e26;
  --accent-soft: rgba(251, 146, 60, 0.14);
  --hover: rgba(255, 255, 255, 0.06);
  --code-bg: rgba(255, 255, 255, 0.08);
  --nav-bg: rgba(8, 8, 12, 0.85);
  --shadow: rgba(0, 0, 0, 0.3);
  --btn: #b35402;
  --btn-hover: #933f02;
  --warn-bg: rgba(180, 140, 80, 0.1);
  --warn-text: #c9b896;
  --warn-border: rgba(180, 140, 80, 0.22);
  /* Softened for dark UI — neon green/red on near-black is harsh to scan. */
  --danger: #d4a0a0;
  --success: #8fb89a;
  --success-bg: rgba(143, 184, 154, 0.14);
  --danger-bg: rgba(212, 160, 160, 0.12);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme='dark']) {
    --bg: #faf8f3;
    --bg2: #f4f0e8;
    --bg3: #ece6da;
    --card: #fffdf9;
    --text: #181309;
    --muted: #4a4034;
    --muted2: #2b241a;
    --accent: #a8500a;
    --accent2: #8a4204;
    --accent-ink: #9c4808;
    --border: rgba(46, 34, 20, 0.11);
    --border2: rgba(46, 34, 20, 0.2);
    --surface: #fffdf9;
    --surface-2: #f1ece2;
    --accent-soft: #fbe8d5;
    --hover: rgba(46, 34, 20, 0.05);
    --code-bg: rgba(46, 34, 20, 0.055);
    --nav-bg: rgba(250, 248, 243, 0.82);
    --shadow: rgba(64, 45, 24, 0.09);
    --btn: #b35402;
    --btn-hover: #933f02;
    --warn-bg: #fbe6c4;
    --warn-text: #8a3f0a;
    --warn-border: #f2cf8f;
    --danger: #b91c1c;
    --success: #15803d;
    --success-bg: #dcecdf;
    --danger-bg: #f6dedd;
  }
}

:root[data-theme='light'] {
  --bg: #faf8f3;
  --bg2: #f4f0e8;
  --bg3: #ece6da;
  --card: #fffdf9;
  --text: #181309;
  --muted: #4a4034;
  --muted2: #2b241a;
  --accent: #a8500a;
  --accent2: #8a4204;
  --accent-ink: #9c4808;
  --border: rgba(46, 34, 20, 0.11);
  --border2: rgba(46, 34, 20, 0.2);
  --surface: #fffdf9;
  --surface-2: #f1ece2;
  --accent-soft: #fbe8d5;
  --hover: rgba(46, 34, 20, 0.05);
  --code-bg: rgba(46, 34, 20, 0.055);
  --nav-bg: rgba(250, 248, 243, 0.82);
  --shadow: rgba(64, 45, 24, 0.09);
  --btn: #b35402;
  --btn-hover: #933f02;
  --warn-bg: #fbe6c4;
  --warn-text: #8a3f0a;
  --warn-border: #f2cf8f;
  --danger: #b91c1c;
  --success: #15803d;
  --success-bg: #dcecdf;
  --danger-bg: #f6dedd;
}

:root[data-theme='dark'] {
  color-scheme: dark;
}
:root[data-theme='light'] {
  color-scheme: light;
}

/* Paint the root so iOS Safari overscroll + toolbar chrome stay on --bg
   (body alone is not enough once a mobile menu locks overflow). */
html {
  background: var(--bg);
}

/* Typography — Switzer for body/UI (sharp at small sizes). Instrument Serif
   for large headings/titles. Geist Mono for code only. */
:root {
  --font-sans: 'Switzer', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, monospace;
  --font-display: 'Instrument Serif', Georgia, serif;
  --text-caption: 12px;
  --text-body: 15px;
}

/* ── Motion ────────────────────────────────────────────────────────────────
   ONE curve and three durations, everywhere. This is the whole difference
   between a site that looks assembled and one that looks designed.

   Measured from the real CSS of the sites we're aiming at (Aug 2026): Apple
   uses a single cubic-bezier 122 times across their stylesheet; Stripe and
   Vercel each have one workhorse curve and about four durations. PostLake had
   five ad-hoc durations and no declared curve at all, so every transition fell
   back to the browser default `ease` — the curve every unstyled page uses.

   --ease is the workhorse (Stripe and Vercel both use this exact value).
   --ease-out is for things entering: fast start, gentle settle. Use it for
   panels, menus and reveals, where the eye should catch the arrival, not the
   departure.

   Durations sit deliberately between Vercel's snappy end (.15s) and Apple's
   stately end (.32s). Apple can afford slow because a marketing page reads
   unhurried as luxurious; a dashboard someone opens every day has to feel
   instant. */
:root {
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 120ms;  /* hover, focus, colour */
  --dur-base: 200ms;  /* panels, menus, reveals */
  --dur-slow: 320ms;  /* page-level, used sparingly */
}

/* Motion sickness is a real, common condition, and the OS setting is how
   someone tells us they have it. Zeroing the DURATION TOKENS rather than
   blanket-killing animation is Stripe's pattern (they have 112 of these
   blocks): everything still happens, it just happens instantly, so no
   interface ends up stuck mid-transition waiting for a transitionend that
   never fires. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Light-mode page background is a clean flat cream — no grid texture. The grid
   read as "designed/indie" rather than premium; whitespace carries it now.
   (Removed 2026-07-22. Dark mode was never gridded.) */