/* ============================================================
   Suiren · Store design tokens
   Aliases over the official palette in suiren-palette.css (load it first).
   Never put hex values here: every color derives from --suiren-*.
   ============================================================ */

:root {
  /* ── Palette aliases ─────────────────────────────────── */
  --color-gold:    var(--suiren-1); /* PALETA-SUIREN--1 */
  --color-rose:    var(--suiren-2); /* PALETA-SUIREN--2 — backgrounds / decoration */
  --color-teal:    var(--suiren-3); /* PALETA-SUIREN--3 — accents (no text on white) */
  --color-pink:    var(--suiren-4); /* PALETA-SUIREN--4 — accents */
  --color-blush:   var(--suiren-5); /* PALETA-SUIREN--5 */
  --color-white:   var(--suiren-6); /* PALETA-SUIREN--6 — main background */
  --color-peach:   var(--suiren-7); /* PALETA-SUIREN--7 */
  --color-teal-lt: var(--suiren-8); /* PALETA-SUIREN--8 */
  --color-cream:   var(--suiren-9); /* PALETA-SUIREN--9 */

  /* Neutral dark ONLY for text, for accessibility (not part of the palette) */
  --color-text:      var(--suiren-ink);
  --color-text-soft: var(--suiren-ink-soft);

  /* Derived from PALETA-SUIREN--2 (#C9658C) for accessibility: the same hue
     darkened 20 % (≈ #A15170). White on it, and it on white, reach 5.36:1
     (WCAG AA ≥ 4.5:1). Use it ONLY for text on light backgrounds and for the
     background of buttons with white text. Decoration keeps --color-rose. */
  --color-rose-strong: color-mix(in srgb, var(--suiren-2) 80%, black);

  /* ── Derived surfaces ────────────────────────────────── */
  --color-bg:          var(--color-white);
  --color-bg-warm:     var(--suiren-bg);
  --color-bg-blush:    var(--suiren-rose-xlight);
  --color-bg-teal:     var(--suiren-teal-xlight);
  --color-line:        var(--suiren-line);
  --color-overlay:     color-mix(in srgb, var(--suiren-ink) 45%, transparent);

  /* ── Typography ──────────────────────────────────────── */
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:    'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* ── Shape & depth ───────────────────────────────────── */
  --radius-sm:   10px;
  --radius-md:   16px;
  --radius-lg:   24px;
  --radius-pill: 999px;
  --shadow-soft: 0 4px 18px color-mix(in srgb, var(--suiren-2) 10%, transparent);
  --shadow-lift: 0 10px 30px color-mix(in srgb, var(--suiren-2) 18%, transparent);

  /* ── Layout ──────────────────────────────────────────── */
  --container:     1120px;
  --gutter:        16px;
  --header-height: 64px;
  --tap:           44px; /* minimum touch target */

  --focus-ring: 3px solid var(--color-rose-strong);
}

@media (min-width: 720px) {
  :root { --gutter: 24px; --header-height: 72px; }
}