/* Design tokens: the only place for colours, type, space, radii and motion values.
   Source of truth: DESIGN_CONTRACT.md, sections 4-8. */

@layer tokens, base, layout, components, motion;

@layer tokens {
  :root {
    color-scheme: light dark;

    /* Colour: Radix Colors v3, brown / sand / amber */
    --paper: #fcf9f6;        /* brown-2 */
    --surface: #fefdfc;      /* brown-1 */
    --tint: #f6eee7;         /* brown-3 */
    --line: #e4cdb7;         /* brown-6 */
    --line-strong: #cea37e;  /* brown-8 */
    --ink: #3e332e;          /* brown-12 */
    --ink-muted: #63635e;    /* sand-11 */
    --accent: #815e46;       /* brown-11 */
    --accent-ink: #fefdfc;   /* brown-1 */
    --warm: #ffc53d;         /* amber-9 */
    --warm-ink: #ab6400;     /* amber-11 */
    --shadow-lift: 0 1px 2px rgb(62 51 46 / 0.06), 0 8px 24px rgb(62 51 46 / 0.10);

    /* Type */
    --font-text: "Onest", "Onest Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    --step--1: 0.875rem;
    --step-0: clamp(1rem, 0.97rem + 0.12vw, 1.0625rem);
    --step-1: clamp(1.25rem, 1.2rem + 0.2vw, 1.375rem);
    --step-2: clamp(1.5rem, 1.35rem + 0.6vw, 1.875rem);
    --step-3: clamp(2rem, 1.6rem + 1.6vw, 3rem);
    --step-4: clamp(2.5rem, 1.8rem + 2.9vw, 4.25rem);

    /* Space: 4px base */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;
    --space-9: 96px;
    --space-10: 128px;

    /* Shape */
    --radius-s: 6px;
    --radius-m: 12px;
    --radius-pill: 999px;

    /* Layout */
    --container: 72rem;
    --gutter: clamp(16px, 5vw, 48px);
    --measure: 68ch;

    /* Motion */
    --dur-fast: 150ms;
    --dur-base: 250ms;
    --dur-slow: 500ms;
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  }

  @media (prefers-color-scheme: dark) {
    :root {
      --paper: #1c1816;        /* brown-2 dark */
      --surface: #28211d;      /* brown-3 dark */
      --tint: #322922;         /* brown-4 dark */
      --line: #4d3c2f;         /* brown-6 dark */
      --line-strong: #7c5f46;  /* brown-8 dark */
      --ink: #f2e1ca;          /* brown-12 dark */
      --ink-muted: #b5b3ad;    /* sand-11 dark */
      --accent: #dbb594;       /* brown-11 dark */
      --accent-ink: #12110f;   /* brown-1 dark */
      --warm: #ffc53d;         /* amber-9 dark */
      --warm-ink: #ffca16;     /* amber-11 dark */
      --shadow-lift: 0 1px 2px rgb(0 0 0 / 0.30), 0 8px 24px rgb(0 0 0 / 0.35);
    }
  }
}