/* ─────────────────────────────────────────────────────────────────────────
   Pirouette · Design Tokens
   Extracted from "Pirouette Design System.html" (warm clay / ochre / paper)
   Fonts: Cormorant Garamond (serif display) · Hanken Grotesk (sans body)
   ───────────────────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Hanken+Grotesk:wght@400;500;600;700&family=Spline+Sans+Mono:wght@400;500&display=swap');

:root {
  /* ── Surfaces ─────────────────────────────────────────────── */
  --paper:      oklch(0.979 0.009 84);
  --paper-2:    oklch(0.963 0.014 78);
  --card:       oklch(0.995 0.004 84);
  --sand:       oklch(0.935 0.021 72);

  /* ── Lines ────────────────────────────────────────────────── */
  --line:       oklch(0.882 0.016 70);
  --line-soft:  oklch(0.918 0.012 74);

  /* ── Text ─────────────────────────────────────────────────── */
  --ink:        oklch(0.275 0.022 52);
  --ink-soft:   oklch(0.430 0.021 55);
  --muted:      oklch(0.560 0.016 60);

  /* ── Clay (primary accent / action) ───────────────────────── */
  --clay:       oklch(0.565 0.110 40);
  --clay-deep:  oklch(0.470 0.098 38);
  --clay-tint:  oklch(0.565 0.110 40 / 0.10);

  /* ── Ochre (warm secondary) ───────────────────────────────── */
  --ochre:      oklch(0.735 0.098 70);
  --ochre-deep: oklch(0.620 0.095 62);
  --ochre-soft: oklch(0.886 0.052 74);

  /* ── Warm darks / blush ───────────────────────────────────── */
  --blush:      oklch(0.917 0.032 46);
  --espresso:   oklch(0.300 0.030 48);
  --espresso-2: oklch(0.232 0.028 46);

  /* ── Radii ────────────────────────────────────────────────── */
  --r-sm:   10px;
  --r-md:   16px;
  --r-lg:   22px;
  --r-xl:   30px;
  --r-pill: 999px;

  /* ── Shadows ──────────────────────────────────────────────── */
  --sh-sm: 0 1px 2px oklch(0.4 0.04 50 / 0.05), 0 2px 8px oklch(0.4 0.04 50 / 0.05);
  --sh-md: 0 2px 4px oklch(0.4 0.04 50 / 0.05), 0 10px 30px -8px oklch(0.4 0.04 50 / 0.12);
  --sh-lg: 0 4px 8px oklch(0.4 0.04 50 / 0.06), 0 28px 56px -16px oklch(0.4 0.04 50 / 0.18);

  /* ── Layout ───────────────────────────────────────────────── */
  --maxw: 1180px;

  /* ── Type ─────────────────────────────────────────────────── */
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans:  "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --mono:  "Spline Sans Mono", ui-monospace, "SF Mono", Menlo, monospace;
}