/* =========================================================
   REMIME — Four chromatic palettes
   Roles: --field / --ink / --signature / --secondary
   Derived: --rule, --rule-soft, --ink-70, --ink-55, --ink-35
   All components read ROLES, never fixed hex.
   ========================================================= */

html[data-palette="parchment"],
body[data-palette="parchment"],
:root{
  --field:     #FAF6F2;
  --ink:       #2A1F3D;
  --signature: #7C3AED;
  --secondary: #C4B5FD;
  --palette-name: "Parchment & Ultraviolet";
  --palette-id: "01";
}

html[data-palette="velvet"],
body[data-palette="velvet"]{
  --field:     #1C0E17;
  --ink:       #F5DCE5;
  --signature: #FF3E8A;
  --secondary: #D4AF37;
  --palette-name: "Velvet Night";
  --palette-id: "02";
}

html[data-palette="moss"],
body[data-palette="moss"]{
  --field:     #1A2B2A;
  --ink:       #E4DDD0;
  --signature: #D4A574;
  --secondary: #8B9987;
  --palette-name: "Moss Archive";
  --palette-id: "03";
}

html[data-palette="chalk"],
body[data-palette="chalk"]{
  --field:     #F5F0E8;
  --ink:       #1A1A1A;
  --signature: #D85A30;
  --secondary: #F0997B;
  --palette-name: "Chalk & Coral";
  --palette-id: "04";
}

/* derived tokens resolved from --ink (all palettes share this logic) */
:root{
  --rule:      color-mix(in oklab, var(--ink) 22%, transparent);
  --rule-soft: color-mix(in oklab, var(--ink) 12%, transparent);
  --ink-70:    color-mix(in oklab, var(--ink) 70%, transparent);
  --ink-55:    color-mix(in oklab, var(--ink) 55%, transparent);
  --ink-35:    color-mix(in oklab, var(--ink) 35%, transparent);
  --field-veil:color-mix(in oklab, var(--field) 85%, transparent);
}
[data-palette] { /* re-derive when palette switches */
  --rule:      color-mix(in oklab, var(--ink) 22%, transparent);
  --rule-soft: color-mix(in oklab, var(--ink) 12%, transparent);
  --ink-70:    color-mix(in oklab, var(--ink) 70%, transparent);
  --ink-55:    color-mix(in oklab, var(--ink) 55%, transparent);
  --ink-35:    color-mix(in oklab, var(--ink) 35%, transparent);
  --field-veil:color-mix(in oklab, var(--field) 85%, transparent);
}

/* cross-fade the whole document on palette change */
html{
  transition:
    background-color 900ms ease,
    color 900ms ease;
}
body, .zone, .canvas-wrap, .btn-remime, .trans-word, .letter, .mark, .echo,
.hour-num, .hour-city, .notify-row, .canvas-stage, .translation-strip{
  transition:
    background-color 900ms ease,
    color 900ms ease,
    border-color 900ms ease;
}