/* Hallmark · tokens · Café-Style Desserts at Home
 * Portable design system. Every colour, face, space and duration used by the
 * page is declared here by name; app.css references tokens, never raw values.
 * ========================================================================== */

:root {
  /* ---------- Colour · OKLCH ----------
     Anchor hue ≈ 75° (warm amber). Every neutral is tinted toward it —
     no zero-chroma greys, which read flat next to photography. */
  --color-paper:         oklch(97.5% 0.0119 79.8);   /* warm ivory  */
  --color-paper-2:       oklch(93.9% 0.0233 75.9);   /* tinted band */
  --color-paper-3:       oklch(91.0% 0.0336 77.6);   /* deep band   */
  --color-paper-on-ink:  oklch(98.1% 0.0107 76.6);   /* type on ink */

  --color-ink:           oklch(23.7% 0.0326 51.1);   /* espresso    */
  --color-ink-2:         oklch(34.4% 0.0391 48.5);
  --color-ink-3:         oklch(47.7% 0.0395 53.5);   /* muted body  */

  --color-accent:        oklch(49.1% 0.1446 14.7);   /* berry       */
  --color-accent-deep:   oklch(42.6% 0.1278 13.2);
  --color-caramel:       oklch(65.5% 0.1076 72.0);   /* decorative  */
  --color-caramel-ink:   oklch(52.0% 0.0915 70.7);   /* as type     */

  --color-rule:          oklch(23.7% 0.0326 51.1 / .14);
  --color-rule-soft:     oklch(23.7% 0.0326 51.1 / .08);
  --color-focus:         oklch(49.1% 0.1446 14.7);

  /* ---------- Type ---------- */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-body:    "Jost", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  --text-xs:         0.785rem;
  --text-sm:         0.88rem;
  --text-base:       1rem;
  --text-lg:         clamp(1.02rem, 3.4vw, 1.14rem);
  --text-xl:         1.3rem;
  --text-2xl:        clamp(1.25rem, 5vw, 1.6rem);
  --text-3xl:        clamp(1.8rem, 6.6vw, 2.95rem);
  --text-display-s:  clamp(1.95rem, 7vw, 3.3rem);
  --text-display:    clamp(2.35rem, 10.4vw, 4.2rem);

  --lh-tight: 1.08;
  --lh-body:  1.62;

  /* ---------- Space · 4-point scale ---------- */
  --space-3xs:  4px;
  --space-2xs:  8px;
  --space-xs:  12px;
  --space-sm:  16px;
  --space-md:  24px;
  --space-lg:  32px;
  --space-xl:  48px;
  --space-2xl: 64px;
  --space-3xl: 96px;
  --space-4xl: 128px;
  --space-5xl: 160px;

  /* ---------- Motion ---------- */
  --ease-out:    cubic-bezier(.22, .61, .36, 1);
  --ease-in:     cubic-bezier(.55, .06, .68, .19);
  --ease-in-out: cubic-bezier(.45, .05, .55, .95);
  --dur-fast: 160ms;
  --dur-base: 260ms;
  --dur-slow: 620ms;

  /* ---------- Line & radius ---------- */
  --rule-hair: 1px;
  --radius-sm:   3px;
  --radius-md:  14px;
  --radius-lg:  22px;
  --radius-pill: 999px;

  /* ---------- Paper grain ----------
     A flat fill reads as a screen; a faint tooth reads as stock. Composited
     into each surface via background-blend-mode — no fixed overlay, so no
     scroll repaint. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}