/* COLOR SYSTEM
   Four locked brand colors + restrained derivations.
   The watch reference: IWC "Le Petit Prince" — midnight blue dial, rose-gold accents,
   cream printing. Midnight is a brand color, not a workhorse; charcoal does the reading. */
:root {
  /* ── Base palette (locked) ───────────────────────────── */
  --midnight: #1B2A4E;        /* primary brand — dark grounds, titles */
  --rose-gold: #B08259;       /* accent only — italics, signature marks, eyebrows */
  --rose-gold-soft: #C9A47B;  /* accent on dark grounds (lighter, for contrast) */
  --cream: #F5F1E8;           /* the page. NEVER pure white */
  --charcoal: #1A1A1A;        /* body text only. NEVER pure black */

  /* ── Derived neutrals (restrained, same temperature) ─── */
  --midnight-deep: #15223F;   /* layering / inset on midnight grounds */
  --midnight-line: #2C3D63;   /* hairlines on midnight */
  --cream-deep: #ECE6D8;      /* card / inset surface on cream */
  --cream-line: #DED7C5;      /* hairlines on cream */
  --charcoal-soft: #4A4A46;   /* secondary / metadata text on cream */
  --charcoal-mute: #6E6E66;   /* tertiary text, captions */

  /* ── Semantic aliases ────────────────────────────────── */
  --surface-page: var(--cream);
  --surface-card: #FBF8F1;          /* a hair lighter than the page, still not white */
  --surface-inset: var(--cream-deep);
  --surface-dark: var(--midnight);
  --surface-dark-inset: var(--midnight-deep);

  --text-heading: var(--midnight);
  --text-body: var(--charcoal);
  --text-muted: var(--charcoal-soft);
  --text-faint: var(--charcoal-mute);
  --text-on-dark: var(--cream);
  --text-on-dark-muted: rgba(245, 241, 232, 0.62);

  --accent: var(--rose-gold);
  --accent-on-dark: var(--rose-gold-soft);

  --border-hairline: var(--cream-line);
  --border-hairline-dark: var(--midnight-line);
  --border-strong: var(--charcoal);

  /* Focus ring — rose gold, quiet */
  --focus-ring: rgba(176, 130, 89, 0.55);
}