/* ALO BETO — Color system
   Two systems coexist: editorial (structure) + pictorial (brand color).
   NO pure black anywhere — ink derives from the line-blue of Alo's drawn figures. */

:root {
  /* ── Editorial system (structure) ───────────────────────────── */
  --ink-line: #173445;   /* primary text, hard lines, logo */
  --ink-soft: #51697A;   /* secondary body text */
  --ink-faint: #8FA3AC;  /* metadata: years, locations, media */
  --rule: #DCE3E6;       /* dividers */
  --signal: #F5E600;     /* the only structural accent: CTAs, page numbers, badges, "+" */
  --paper: #FFFFFF;      /* pure white page background */
  --ink-warm: #2E2620;   /* reserve: warm ink alternative (terracotta-derived), not default */

  /* ── Pictorial system (brand color, extracted from the paintings) ──
     Each hue: -soft = canvas glaze (large fields/transitions),
               -vivid = saturated (digital accents, UI, hover). */
  --terracotta-soft: #E2A073;
  --terracotta-vivid: #DD6B2E;

  --ochre-soft: #E0C97A;
  --ochre-vivid: #D4A017;

  --sage-soft: #B8C9A8;
  --sage-vivid: #6B9B5E;

  --sky-soft: #A7C6DA;
  --sky-vivid: #2D8FC4;

  --mauve-soft: #CBB3D6;
  --mauve-vivid: #9A5FB8;

  /* Line-blue — the signature stroke of the drawn figures.
     NOT a background. Reserved for line illustration, icons, cursor, favicon. */
  --line-blue: #5C8AAE;
  --line-blue-vivid: #2F6E96;

  /* ── Semantic aliases ───────────────────────────────────────── */
  --text-primary: var(--ink-line);
  --text-secondary: var(--ink-soft);
  --text-meta: var(--ink-faint);
  --surface-page: var(--paper);
  --border-rule: var(--rule);
  --accent: var(--signal);

  --link: var(--sky-vivid);
  --link-hover: var(--terracotta-vivid);
  --focus-ring: var(--sky-vivid);
  --success: var(--sage-vivid);

  /* Section field tints (pictorial soft glazes) */
  --field-performance: var(--terracotta-soft);
  --field-painting: var(--sage-soft);
  --field-video: var(--sky-soft);
  --field-intimate: var(--mauve-soft);
  --field-quote: var(--ochre-soft);
}