/* Design tokens — mirrored from the Figma DESIGN-SYSTEM file (Colour page + variables).
   Components reference semantic tokens; primitives are only referenced by semantic tokens. */
:root {
  /* ---------- Primitives ---------- */
  --color-neutral-0: #fff8ee;
  --color-neutral-50: #ffffff;
  --color-neutral-100: #f5ede0;
  --color-neutral-200: #e6dccb;
  --color-neutral-400: #857d6e;
  --color-neutral-600: #58523f;

  --color-vermilion-100: #fbd9ce;
  --color-vermilion-300: #f78d6a;
  --color-vermilion-500: #f24210;
  --color-vermilion-600: #b92c06;
  --color-vermilion-700: #9e2605;

  --color-violet-100: #e3dfff;
  --color-violet-300: #aba1ff;
  --color-violet-500: #7d6eff;
  --color-violet-600: #5645e6;
  --color-violet-700: #3f30b5;

  --color-periwinkle-100: #e4e8f5;
  --color-periwinkle-300: #a9cbf4;

  --color-marigold-300: #f7de6b;
  --color-marigold-500: #e7b02f;
  --color-marigold-700: #6b5504;

  --color-pink-300: #f9c3e0;
  --color-pink-500: #f17ab4;

  --color-olive-300: #d9ea7a;
  --color-olive-500: #3f6212;
  --color-olive-700: #2f3a17;
  --color-olive-900: #15170d;

  /* ---------- Semantic: background ---------- */
  --color-background-page: var(--color-neutral-0);
  --color-background-surface: var(--color-neutral-50);
  --color-background-subtle: var(--color-neutral-100);
  --color-background-inverse: var(--color-olive-900);
  --color-background-lime: var(--color-olive-300);
  --color-background-sky: var(--color-periwinkle-300);
  --color-background-blush: var(--color-pink-300);
  --color-background-butter: var(--color-marigold-300);

  /* ---------- Semantic: text ---------- */
  --color-text-primary: var(--color-olive-900);
  --color-text-secondary: var(--color-olive-700);
  --color-text-muted: var(--color-neutral-600);
  --color-text-link: var(--color-olive-500);
  --color-text-inverse: var(--color-neutral-50);

  /* ---------- Semantic: border ---------- */
  --color-border-subtle: var(--color-neutral-200);
  --color-border-default: var(--color-neutral-400);
  --color-border-focus: var(--color-olive-500);

  /* ---------- Semantic: brand ---------- */
  --color-brand-primary: var(--color-olive-900);
  --color-brand-primary-hover: var(--color-olive-700);
  --color-brand-on-primary: var(--color-neutral-0);
  --color-brand-accent: var(--color-olive-500);
  --color-brand-accent-hover: var(--color-olive-700);
  --color-brand-on-accent: var(--color-neutral-0);

  /* ---------- Semantic: feedback ---------- */
  --color-feedback-success: var(--color-olive-500);
  --color-feedback-warning: var(--color-marigold-700);
  --color-feedback-error: var(--color-vermilion-700);

  --color-scrim: rgb(21 23 13 / 0.5);
  --shadow-hard: 4px 4px 0 var(--color-olive-900);

  /* ---------- Typography ---------- */
  --font-family-heading: "Fraunces", Georgia, serif;
  --font-family-body: "DM Sans", system-ui, sans-serif;
  --font-weight-regular: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-base: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 20px;
  --font-size-2xl: 24px;
  --font-size-3xl: 36px;
  --font-size-4xl: 48px;
  --font-size-5xl: 72px;
  --font-size-6xl: 112px;

  --line-height-xs: 16px;
  --line-height-sm: 20px;
  --line-height-base: 24px;
  --line-height-lg: 28px;
  --line-height-xl: 28px;
  --line-height-2xl: 32px;
  --line-height-3xl: 44px;
  --line-height-4xl: 56px;
  --line-height-5xl: 80px;
  --line-height-6xl: 112px;

  /* ---------- Spacing ---------- */
  --spacing-3xs: 2px;
  --spacing-2xs: 4px;
  --spacing-xs: 8px;
  --spacing-sm: 12px;
  --spacing-md: 16px;
  --spacing-md-plus: 20px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 48px;
  --spacing-3xl: 64px;
  --spacing-4xl: 120px;
  --spacing-5xl: 160px;

  /* ---------- Radius ---------- */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-2xl: 40px;
  --radius-full: 9999px;

  /* ---------- Motion ---------- */
  --motion-fast: 200ms;
  --motion-medium: 300ms;
  --motion-slow: 700ms;
  --motion-stagger: 80ms;
  --motion-rise: 24px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* ---------- Container (Desktop mode, 1200 and up) ---------- */
  --container-max: 1200px;
  --container-padding-x: 64px;
  --reading-max: 720px;
  --section-space: var(--spacing-4xl);
}

/* Container: Tablet mode (768 to 1199) */
@media (max-width: 1199px) {
  :root {
    --container-max: 768px;
    --container-padding-x: 32px;
    --section-space: var(--spacing-3xl);
  }
}

/* Container: Mobile mode (under 768) */
@media (max-width: 767px) {
  :root {
    --container-max: 390px;
    --container-padding-x: 20px;
    --section-space: var(--spacing-2xl);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast: 0ms;
    --motion-medium: 0ms;
    --motion-slow: 0ms;
    --motion-stagger: 0ms;
    --motion-rise: 0px;
  }
}