/* ===================== Variables ===================== */
:root {
  /* ---- Brand palette (Casa Chromatica — Midnight Orchid) ---- */
  --midnight-orchid: #312a44;
  --dusky-lilac:     #88708e;
  --iris-mist:       #baaac8;
  --plum-blossom:    #d7c5d8;
  --silver-wisteria: #dad4df;

  /* ---- Shades & tints derived from the palette above ---- */
  --orchid-deep:    #1f1a2c;
  --orchid-soft:    #463c5e;
  --lilac-deep:     #6b5872;
  --wisteria-pale:  #f2eff5;
  --white:          #ffffff;

  /* ---- Ramp: the palette ordered dark -> light. Swapping these eight
         values re-themes the whole page; nothing outside :root and the
         theme blocks names a palette color directly. ---- */
  --ramp-1: var(--orchid-deep);
  --ramp-2: var(--midnight-orchid);
  --ramp-3: var(--orchid-soft);
  --ramp-4: var(--lilac-deep);
  --ramp-5: var(--dusky-lilac);
  --ramp-6: var(--iris-mist);
  --ramp-7: var(--plum-blossom);
  --ramp-8: var(--silver-wisteria);

  /* ---- Semantic tokens (everything below maps to the ramp) ---- */
  --ink: var(--ramp-2);
  --ink-soft: var(--ramp-4);
  --bg: var(--wisteria-pale);
  --card: var(--white);
  --border: var(--ramp-7);
  --primary: var(--ramp-2);
  --primary-dark: var(--ramp-1);
  --primary-hover: var(--ramp-3);
  --primary-light: var(--ramp-7);
  --accent: var(--ramp-6);
  --success: var(--ramp-5);
  --danger: var(--ramp-1);

  /* ---- Translucent layers (white / orchid only) ---- */
  --on-dark: var(--white);
  --on-dark-strong: rgba(255, 255, 255, .88);
  --on-dark-muted: rgba(255, 255, 255, .70);
  --on-dark-faint: rgba(255, 255, 255, .55);
  --on-dark-line: rgba(255, 255, 255, .14);
  --on-dark-veil: rgba(255, 255, 255, .09);
  --sheen: rgba(255, 255, 255, .35);
  --chip-light: rgba(255, 255, 255, .92);
  --header-bg: rgba(242, 239, 245, .85);

  --veil-dark: rgba(31, 26, 44, .55);
  --veil-dark-soft: rgba(31, 26, 44, .22);
  --glow-iris: rgba(186, 170, 200, .28);
  --glow-lilac: rgba(136, 112, 142, .45);
  --shadow-ink: rgba(49, 42, 68, .18);
  --shadow-ink-strong: rgba(49, 42, 68, .28);
  --shadow-deep: rgba(31, 26, 44, .38);

  /* ---- Signature gradients (palette only) ---- */
  --grad-night: linear-gradient(160deg, var(--ramp-1) 0%, var(--ramp-2) 55%, var(--ramp-4) 100%);
  --grad-brand: linear-gradient(135deg, var(--ramp-1), var(--ramp-4));

  --radius: 16px;
  --shadow: 0 10px 30px -12px var(--shadow-ink);
  --font: 'Cairo', 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

html[dir="ltr"] {
  --font: 'Manrope', 'Cairo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}