/* ==========================================================================
   Design tokens — mirrors the "Theme" variable collection in Figma.
   Light is the base; dark redefines only what changes.
   ========================================================================== */

:root {
  /* --- colour: light ---------------------------------------------------- */
  --bg: #ffffff;
  --surface: #f6f6f5;
  --surface-alt: #efefee;
  --border: #e4e4e2;
  --text-primary: #1a1a18;
  --text-secondary: #5c5c57;
  --text-muted: #8e8e87;
  --accent: #31a0a9;

  /* Paper tones for the guestbook — deliberately outside the theme ramp,
     because a notebook page stays paper-coloured in both modes. */
  --paper: #fdfcf8;
  --paper-alt: #f7f6f2;
  --paper-rule: rgba(140, 140, 128, 0.35);
  --ink: #222945;
  --ink-soft: #595e73;
  --pencil: #31a0a9;

  --scrim: rgba(15, 15, 15, 0.55);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 24px 60px -10px rgba(0, 0, 0, 0.28);

  /* --- typography ------------------------------------------------------- */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono",
    Menlo, Consolas, "Liberation Mono", monospace;
  --font-hand: "Caveat", "Segoe Script", cursive;

  --text-xs: 0.6875rem;   /* 11px — Mono/XS, Label/Caps */
  --text-sm: 0.75rem;     /* 12px — Mono/S */
  --text-md: 0.8125rem;   /* 13px — Body/S, Mono/Prompt */
  --text-base: 0.875rem;  /* 14px — Body/M, Mono/M */
  --text-lg: 1rem;        /* 16px — Body/L, Heading/M */
  --text-xl: 1.25rem;     /* 20px — Heading/L */
  --text-2xl: 1.75rem;    /* 28px — Heading/XL */

  --leading-tight: 1.25;
  --leading-snug: 1.4;
  --leading-normal: 1.6;

  /* --- space (Figma "Space" collection) --------------------------------- */
  --space-2: 2px;
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-28: 28px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-64: 64px;
  --space-96: 96px;
  --space-128: 128px;

  /* --- radius ----------------------------------------------------------- */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* --- layout ----------------------------------------------------------- */
  --page-max: 1440px;
  --page-pad: 80px;
  --content-max: 1280px;
  --reading-max: 800px;

  /* --- motion ----------------------------------------------------------- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 120ms;
  --dur: 220ms;
  --dur-slow: 420ms;

  color-scheme: light;
}

/* Explicit dark choice OR system dark when no explicit light choice.
   Two selectors, one block — keeps the palette defined in a single place. */
:root[data-theme="dark"] {
  --bg: #0e0e0f;
  --surface: #17171a;
  --surface-alt: #1e1e22;
  --border: #2a2a2f;
  --text-primary: #e8e8e4;
  --text-secondary: #a0a099;
  --text-muted: #6e6e68;
  --accent: #5cc6ce;

  --scrim: rgba(4, 4, 5, 0.68);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 24px 60px -10px rgba(0, 0, 0, 0.7);

  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0e0e0f;
    --surface: #17171a;
    --surface-alt: #1e1e22;
    --border: #2a2a2f;
    --text-primary: #e8e8e4;
    --text-secondary: #a0a099;
    --text-muted: #6e6e68;
    --accent: #5cc6ce;

    --scrim: rgba(4, 4, 5, 0.68);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 24px 60px -10px rgba(0, 0, 0, 0.7);

    color-scheme: dark;
  }
}

@media (max-width: 900px) {
  :root {
    --page-pad: var(--space-24);
  }
}