/*
  Deepwords design tokens.
  Every colour, size, and space in the interface comes from here.
  Change a token and the whole product follows.
*/

:root {
  /* Palette */
  --ivory: #fcfbf8;
  --paper: #f8f5f0;
  --parchment: #f1ede4;
  --ink: #2b2925;
  --stone: #4f4a43; /* muted text: 8:1 on ivory, 5:1 over the strongest part of a bust */
  --taupe: #8e6a52; /* the single warm accent: white text on it is 4.9:1 */
  --taupe-deep: #7a5943;
  --taupe-text: #624330; /* the accent as small text */

  /* Semantic roles (light) */
  --bg: var(--ivory);
  --surface: transparent; /* cards are see-through: the bust shows behind the words */
  --surface-sunk: rgba(43, 41, 37, 0.05);
  --text: var(--ink);
  --text-soft: var(--stone);
  --accent: var(--taupe-text);
  --line: rgba(43, 41, 37, 0.16);
  --line-strong: rgba(43, 41, 37, 0.26);
  --focus: var(--taupe);
  --danger: #8a3b32;

  --primary-bg: var(--taupe);
  --primary-bg-hover: var(--taupe-deep);
  --primary-fg: #ffffff;

  /* The marble bust behind the page: faint, so it never competes with the words */
  --bust-opacity: 0.24;
  --bust-width: min(40vw, 36rem);

  /* Type: a classic serif for thoughts, a clean sans for the interface */
  --font-serif: 'Times New Roman', Times, 'Liberation Serif', 'Nimbus Roman', serif;
  --font-sans: Arial, 'Helvetica Neue', Helvetica, 'Liberation Sans', sans-serif;

  --step-0: 1rem;
  --step-1: 1.125rem;
  --step-2: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --step-3: clamp(1.6rem, 1.35rem + 1.2vw, 2.25rem);
  --step-4: clamp(2rem, 1.4rem + 2.8vw, 3.25rem);
  --step-5: clamp(2.5rem, 1.5rem + 4.6vw, 4.5rem);
  --small: 0.875rem;
  --micro: 0.75rem;

  /* Space (4px base) */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4.5rem;
  --s-9: 6.5rem;
  --gutter: clamp(1.25rem, 0.5rem + 3.5vw, 3rem);

  /* Shape */
  --r-sm: 0.75rem;
  --r-md: 1.125rem;
  --r-pill: 999px;

  /* Layout */
  --narrow: 39rem; /* the centered column for lists and cards */
  --page-max: 68rem;
  --header-h: 4rem;
  --bottomnav-h: 4.25rem;

  /* Motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 240ms;
  --dur-slow: 600ms;

  color-scheme: light;
}

/* Dark: warm charcoal, not a grey inversion. */
:root[data-theme='dark'] {
  --bg: #151412;
  --surface: transparent;
  --surface-sunk: rgba(255, 255, 255, 0.06);
  --text: #ece7da;
  --text-soft: #a9a496;
  --accent: #d2b08f;
  --line: rgba(236, 231, 218, 0.14);
  --line-strong: rgba(236, 231, 218, 0.3);
  --focus: #d2b08f;
  --danger: #e59a8e;
  --bust-opacity: 0.22;
  --primary-bg: #d2b08f;
  --primary-bg-hover: #dcbd9f;
  --primary-fg: #151412;
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bg: #151412;
    --surface: transparent;
    --surface-sunk: rgba(255, 255, 255, 0.06);
    --text: #ece7da;
    --text-soft: #a9a496;
    --accent: #d2b08f;
    --line: rgba(236, 231, 218, 0.14);
    --line-strong: rgba(236, 231, 218, 0.3);
    --focus: #d2b08f;
    --danger: #e59a8e;
    --bust-opacity: 0.22;
    --primary-bg: #d2b08f;
    --primary-bg-hover: #dcbd9f;
    --primary-fg: #151412;
    color-scheme: dark;
  }
}