/* =====================================================
   Design tokens — KORO
   Warm paper + sumi-ink palette chosen to sit cleanly
   behind black-and-white ink artwork, with a Shiba-rust accent.
   ===================================================== */

:root {
  /* ---------- Palette ---------- */
  --color-bg: #F7F2E8;            /* warm paper, primary surface */
  --color-bg-alt: #EFE7D6;        /* deeper paper, contrast bands */
  --color-paper: #FFFFFF;         /* card / artwork mat (matches art bg) */
  --color-ink: #211E1A;           /* sumi-ink, primary text */
  --color-ink-soft: #4A453D;      /* secondary text, body prose */
  --color-ink-mute: #8A8275;      /* tertiary, captions, meta */
  --color-sumi: #1C1A17;          /* darkest band: hero, footer */
  --color-sumi-soft: #2A2722;     /* slightly lifted dark */
  --color-rust: #C2622F;          /* Shiba rust — links, accents, CTAs */
  --color-rust-deep: #A44E22;     /* rust hover/pressed */
  --color-tan: #E4D6BE;           /* soft tan, warm fills */
  --color-gold: #CFA24B;          /* warm gold, small highlights */
  --color-line: rgba(33, 30, 26, 0.16);   /* hairlines */
  --color-line-soft: rgba(33, 30, 26, 0.08);
  --color-cream-on-dark: #F3EADb; /* text on sumi bands */

  /* ---------- Typography ---------- */
  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;

  --fs-display-hero: clamp(72px, 14vw, 220px);
  --fs-display-xl:   clamp(56px, 10vw, 170px);
  --fs-display-lg:   clamp(44px, 7vw, 112px);
  --fs-display-md:   clamp(34px, 5vw, 76px);
  --fs-heading:      clamp(28px, 3.2vw, 56px);
  --fs-eyebrow:      12px;
  --fs-body-lg:      19.2px;
  --fs-body:         16px;
  --fs-meta:         13px;

  --lh-display: 0.94;
  --lh-heading: 1.08;
  --lh-body: 1.6;
  --ls-display: -0.015em;
  --ls-eyebrow: 0.2em;
  --ls-button:  0.04em;

  /* ---------- Spacing scale (4px base) ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;
  --space-11: 192px;
  --space-12: 256px;

  /* ---------- Radii ---------- */
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 18px;
  --radius-pill: 999px;

  /* ---------- Layout ---------- */
  --gutter: clamp(20px, 4vw, 56px);
  --max-w-content: 1440px;
  --max-w-text: 62ch;

  /* ---------- Motion ---------- */
  --ease-out-soft: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out-snappy: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 180ms;
  --dur-base: 320ms;
  --dur-slow: 560ms;

  /* ---------- Art card ---------- */
  --art-shadow: 0 30px 60px -36px rgba(33, 30, 26, 0.45);
  --art-shadow-soft: 0 18px 40px -28px rgba(33, 30, 26, 0.35);
}