/* ==========================================================================
   EIMEI — Design tokens
   Palette, type, spacing, motion. Change values here, not in components.
   ========================================================================== */

:root {
  /* ---- Brand colors (the five, locked) ---- */
  --color-sumi: #2B2B2B;
  --color-kinari: #F5F0E8;
  --color-gold: #C4A265;
  --color-indigo: #2E4F6F;
  --color-vermillion: #AB3B3A;

  /* Gold darkened for use as TEXT on light (Kinari) backgrounds.
     Raw --color-gold on --color-kinari is ~2.1:1 (fails WCAG AA).
     --color-gold-text on --color-kinari is ~5.2:1 (passes AA).
     Raw --color-gold is fine as text on --color-sumi (~5.9:1) and for
     all non-text uses: hairlines, borders, icons, hover marks. */
  --color-gold-text: #7C5F35;

  /* ---- Semantic surface / text pairs ---- */
  --color-bg: var(--color-kinari);
  --color-bg-inverse: var(--color-sumi);
  --color-text: var(--color-sumi);
  --color-text-inverse: var(--color-kinari);

  /* Muted secondary text, pre-calibrated per background (~5:1 / ~6.9:1) —
     don't build muted text with opacity, it drifts contrast on reuse. */
  --color-text-muted: #6B6764;
  --color-text-inverse-muted: #B8B5AF;

  --color-accent-gold: var(--color-gold);
  --color-accent-gold-text: var(--color-gold-text);
  --color-accent-indigo: var(--color-indigo);
  --color-accent-vermillion: var(--color-vermillion);

  --color-border: rgba(43, 43, 43, 0.14);
  --color-border-inverse: rgba(245, 240, 232, 0.18);
  --color-border-gold: rgba(196, 162, 101, 0.55);

  /* Focus ring colors — chosen per section theme so the ring always
     hits 3:1 against the page background it's drawn on. See base.css. */
  --color-focus: var(--color-indigo);
  --color-focus-inverse: var(--color-gold);

  /* ---- Type families ---- */
  --font-display: 'Shippori Mincho', 'EB Garamond', serif; /* hero / page H1 */
  --font-heading: 'EB Garamond', 'Shippori Mincho', serif; /* section heads */
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* ---- Type scale (fluid, rem-based on 16px root) ---- */
  --fs-hero: clamp(2.75rem, 2.1rem + 3vw, 4.75rem);
  --fs-h1: clamp(2.25rem, 1.85rem + 1.8vw, 3.25rem);
  --fs-h2: clamp(1.625rem, 1.4rem + 1vw, 2.25rem);
  --fs-h3: clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem);
  --fs-body-lg: 1.1875rem;
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-micro: 0.75rem;

  --lh-display: 1.15;
  --lh-heading: 1.32;
  --lh-body: 1.68;
  --lh-tight: 1.2;

  --ls-kicker: 0.14em;
  --ls-display: -0.01em;

  /* ---- Spacing (8px grid) ---- */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4rem;
  --space-7: 6rem;
  --space-8: 8rem;
  --space-9: 10rem;

  --section-py: clamp(4rem, 3rem + 5vw, 8rem);
  --section-px: clamp(1.25rem, 0.5rem + 4vw, 4rem);
  --content-max: 1200px;
  --content-narrow: 46rem;

  /* ---- Shape ---- */
  --radius: 0px; /* crisp, signage-grade edges — no soft corners */

  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 0.2s;
  --duration-base: 0.4s;
  --duration-slow: 0.8s;
  --duration-reveal: 1s;

  /* ---- Z-index ---- */
  --z-header: 100;
  --z-overlay: 200;
}