/* Hallmark · design tokens · NaarDoon / Eranshahr Library
 * genre: editorial · macrostructure: Workbench (filter rail + content grid) · nav: N6 Masthead
 * theme: custom (vibe: "archival, warm, Persianate visual heritage" · anchor: brand logo coral-red)
 *   paper oklch(98.3% 0.004 75) · accent oklch(56% 0.19 27) warm · display Fraunces + body Poppins
 * axes: paper-band=light · display-style=serif-display · accent-hue=warm
 *
 * This file is the single source of truth for color, type, spacing, motion and radius.
 * site.css and collage.css consume these tokens by name — never inline a raw value.
 * Legacy `--eran-*` names are kept as aliases so existing stylesheets keep working.
 */

:root {
  /* ---- Color: surfaces ---- */
  --color-paper:        oklch(98.3% 0.004 75);   /* page background — warm near-white */
  --color-paper-2:      oklch(100% 0 0);         /* card / surface background */
  --color-paper-3:      oklch(95.5% 0.012 45);   /* subtle neutral hover fill */

  /* ---- Color: ink ---- */
  --color-ink:          oklch(24% 0.012 45);      /* primary text */
  --color-ink-2:        oklch(49% 0.012 45);      /* muted text */
  --color-rule:         oklch(90% 0.008 60);      /* borders / dividers */

  /* ---- Color: accent (brand coral-red, from the NaarDoon flower mark) ---- */
  --color-accent:       oklch(56% 0.19 27);
  --color-accent-dark:  oklch(46% 0.18 27);
  --color-accent-ink:   oklch(99% 0.01 27);       /* text/icons on filled accent surfaces */
  --color-accent-tint:  oklch(95% 0.025 27);      /* opaque light wash, e.g. image-card hover */
  --color-accent-wash-weak: oklch(56% 0.19 27 / 0.08);
  --color-accent-wash:      oklch(56% 0.19 27 / 0.16);
  --color-accent-ring:      oklch(56% 0.19 27 / 0.35);
  --color-selection:        oklch(56% 0.19 27 / 0.2);
  --color-focus:        oklch(56% 0.19 27);

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

  /* ---- Type scale ---- */
  --text-display: clamp(2.6rem, 6vw, 4.5rem);
  --text-2xl:     clamp(1.6rem, 3vw, 2.25rem);
  --text-xl:      1.5rem;
  --text-lg:      1.25rem;
  --text-md:      1.0625rem;
  --text-sm:      0.9rem;
  --text-xs:      0.78rem;

  /* ---- Spacing (4pt scale) ---- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2rem;
  --space-xl:  3rem;
  --space-2xl: 4.5rem;

  /* ---- Radius ---- */
  --radius-sm:   0.6rem;
  --radius-md:   0.9rem;
  --radius-pill: 999px;

  /* ---- Shadow (neutral ink, not chromatic) ---- */
  --shadow-sm: 0 2px 10px rgba(20, 20, 30, 0.05);
  --shadow:    0 10px 30px rgba(20, 20, 30, 0.08);
  --shadow-lg: 0 18px 40px rgba(20, 20, 30, 0.14);

  /* ---- Motion ---- */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-short: 160ms;
  --dur-base:  220ms;
  --dur-slow:  320ms;

  /* ---- Legacy aliases (kept so existing var() references keep working) ---- */
  --eran-accent:      var(--color-accent);
  --eran-accent-dark: var(--color-accent-dark);
  --eran-ink:         var(--color-ink);
  --eran-muted:       var(--color-ink-2);
  --eran-border:      var(--color-rule);
  --eran-bg:          var(--color-paper);
  --eran-card-bg:     var(--color-paper-2);
  --eran-radius:      var(--radius-md);
  --eran-radius-sm:   var(--radius-sm);
  --eran-shadow-sm:   var(--shadow-sm);
  --eran-shadow:      var(--shadow);
  --eran-shadow-lg:   var(--shadow-lg);
  --eran-transition:  180ms var(--ease-out);
}