/* ============================================================
   Aelo — Colors
   Warm neutral base + one terracotta accent. Terra is ~8% of any
   surface and always the primary action. Three muted hues (sage /
   gold / slate) carry status & charts in dashboards.
   ============================================================ */
:root {
  /* ---- Brand / accent ---- */
  --terra:        #D9663A; /* primary action, brand accent */
  --terra-deep:   #C04E26; /* hover / pressed */
  --terra-press:  #AC4520; /* deepest press */
  --peach:        #F0B49A; /* tint / soft fill */
  --peach-wash:   #F7DCCE; /* faintest terra wash */

  /* ---- Ink / neutrals (warm) ---- */
  --ink:          #1A1A18; /* graphite — primary text & dark surface */
  --ink-soft:     #6B6862; /* secondary text */
  --warm-gray:    #8A847B; /* muted text, mono labels */
  --disc-top:     #33332F; /* logo top disc */
  --disc-gray:    #C7C2BA; /* logo bottom disc */

  /* ---- Surfaces (warm) ---- */
  --bg:           #F5F3EF; /* warm white — page background */
  --card:         #FFFFFF; /* card / panel */
  --sand:         #ECE7E0; /* sunken / secondary surface */
  --cream:        #FBF8F3; /* cream — soft inset, text on dark */
  --line:         #E6E2DC; /* hairline border */
  --line-strong:  #D8D2CA; /* stronger divider */

  /* ---- Status / data ---- */
  --sage:         #3E7C74; /* success / published / live */
  --gold:         #E0A33E; /* warning / in-progress / draft */
  --slate:        #4A5B73; /* info / data series */

  /* ============================================================
     Semantic aliases — reference these in components, not raw hues.
     ============================================================ */
  --text-primary:   var(--ink);
  --text-secondary: var(--ink-soft);
  --text-muted:     var(--warm-gray);
  --text-accent:    var(--terra);
  --text-on-accent: #FFFFFF;
  --text-on-ink:    var(--cream);

  --surface-page:   var(--bg);
  --surface-card:   var(--card);
  --surface-sunken: var(--sand);
  --surface-inset:  var(--cream);
  --surface-ink:    var(--ink);

  --border:         var(--line);
  --border-strong:  var(--line-strong);
  --border-accent:  var(--terra);

  --accent:         var(--terra);
  --accent-hover:   var(--terra-deep);
  --accent-press:   var(--terra-press);
  --accent-tint:    var(--peach);
  --accent-wash:    var(--peach-wash);

  --success: var(--sage);
  --warning: var(--gold);
  --info:    var(--slate);

  /* focus ring */
  --ring: color-mix(in srgb, var(--terra) 45%, transparent);
}