/* ============================================================
   Suiren · Official color palette
   Single source of truth for every UI color.

   NOTE: the Atelier is served from templates/atelier/ as its own
   web root, so it keeps an identical copy at
   templates/atelier/css/suiren-palette.css. Edit both together.
   ============================================================ */

:root {
  /* ── Official palette ─────────────────────────────────── */
  --suiren-1: #F4DC9F;  /* gold   */
  --suiren-2: #C9658C;  /* rose   — accent / CTA */
  --suiren-3: #52B5BF;  /* teal   — accent / actions */
  --suiren-4: #EBA2B7;  /* pink   — accent / highlights */
  --suiren-5: #EECFDA;  /* blush  */
  --suiren-6: #FEFFFF;  /* white  — breathing space */
  --suiren-7: #FDC1D7;  /* peach  */
  --suiren-8: #8AC8CF;  /* light teal */
  --suiren-9: #F6E7C3;  /* cream  */

  /* ── Neutrals for text (readability; not part of the palette) ── */
  --suiren-ink:      #3A2A30;
  --suiren-ink-soft: #7A6A70;

  /* ── Derived shades (always computed from the palette) ── */
  --suiren-bg:          color-mix(in srgb, var(--suiren-9) 30%, var(--suiren-6));
  --suiren-line:        color-mix(in srgb, var(--suiren-9) 55%, var(--suiren-5));
  --suiren-teal-dark:   color-mix(in srgb, var(--suiren-3) 78%, black);
  --suiren-teal-xlight: color-mix(in srgb, var(--suiren-8) 18%, var(--suiren-6));
  --suiren-rose-xlight: color-mix(in srgb, var(--suiren-5) 35%, var(--suiren-6));
  --suiren-gold-dark:   color-mix(in srgb, var(--suiren-1) 45%, black);
  --suiren-gold-xlight: color-mix(in srgb, var(--suiren-1) 25%, var(--suiren-6));
  --suiren-muted-bg:    color-mix(in srgb, var(--suiren-ink-soft) 8%, var(--suiren-6));
}