/* ============================================================
   Lux Light — Colour System
   "Premium editorial." An alabaster base lit by dark navy and
   gold drawn straight from the logo, with a warm amber light-glow
   reserved for moments of emphasis.
   Base values first, semantic aliases below.
   ============================================================ */

:root {
  /* ---------- Base surface : Alabaster ---------- */
  --alabaster:        oklch(0.969 0.007 86);   /* #f5f3ec — page base            */
  --alabaster-sunk:   oklch(0.945 0.009 86);   /* #ece8dd — recessed wells       */
  --alabaster-warm:   oklch(0.978 0.012 84);   /* #faf6ec — warm raised panel    */
  --paper:            oklch(0.995 0.003 90);    /* #fdfcf9 — cards / sheets       */

  /* ---------- Navy : drawn from the logo mark ---------- */
  --navy-950:         #08132a;   /* deepest — full-bleed dark sections   */
  --navy-900:         #0a1730;
  --navy-800:         #102246;   /* ⭐ brand navy — the logo's left face  */
  --navy-700:         #1b3157;
  --navy-600:         #2c456b;
  --navy-500:         #45597f;   /* muted navy — secondary text on light */

  /* ---------- Gold : the logo's lit face ---------- */
  --gold-bright:      #e2c777;   /* highlight edge / hover sheen          */
  --gold:             #c19a4b;   /* ⭐ primary gold                        */
  --gold-deep:        #a87e33;   /* gold text on light (AA), pressed      */
  --gold-ink:         #7d5d22;   /* gold used as small body text          */
  --gold-soft:        oklch(0.945 0.035 84);   /* #f0e6cf — gold tint fill */

  /* ---------- Amber : warm light glow (emphasis only) ---------- */
  --amber:            #f5b942;   /* the lamp's warm light                 */
  --amber-glow:       oklch(0.86 0.11 78 / 0.55);  /* soft halo            */

  /* ---------- Warm neutrals (alabaster-tuned greys) ---------- */
  --ink-900:          #1a1c22;   /* near-black warm ink                   */
  --ink-700:          #3a3d46;
  --ink-500:          #6b6e78;   /* muted body                            */
  --ink-400:          #8d909a;   /* captions / placeholders               */
  --line-strong:      oklch(0.88 0.008 86);   /* #ddd9cf — divider strong  */
  --line:             oklch(0.915 0.007 86);  /* #e6e2d8 — hairline        */
  --line-soft:        oklch(0.94 0.006 86);   /* #ece9e0 — faint           */

  /* ---------- Semantic status ---------- */
  --positive:         #3f7d52;   /* "in stock", success — muted forest    */
  --positive-soft:    oklch(0.94 0.03 150);
  --warning:          #c0822a;   /* lead-time / caution — tied to gold     */
  --warning-soft:     oklch(0.94 0.04 80);
  --critical:         #a8442f;   /* error — warm terracotta, not red       */
  --critical-soft:    oklch(0.93 0.035 35);
  --info:             #2c456b;   /* informational — navy-600               */

  /* ============================================================
     Semantic aliases — reference these in components
     ============================================================ */
  --bg-base:          var(--alabaster);
  --bg-sunk:          var(--alabaster-sunk);
  --bg-raised:        var(--alabaster-warm);
  --surface-card:     var(--paper);
  --surface-inverse:  var(--navy-800);
  --surface-inverse-deep: var(--navy-950);

  --text-display:     var(--navy-800);   /* serif headings              */
  --text-heading:     var(--ink-900);
  --text-body:        var(--ink-700);
  --text-muted:       var(--ink-500);
  --text-faint:       var(--ink-400);
  --text-on-inverse:  var(--alabaster);
  --text-on-inverse-muted: oklch(0.78 0.01 86);

  --accent:           var(--gold);
  --accent-hover:     var(--gold-bright);
  --accent-press:     var(--gold-deep);
  --accent-text:      var(--gold-ink);    /* gold as small text on light (AA: ~5.4:1) */
  --accent-fill-soft: var(--gold-soft);

  --border:           var(--line);
  --border-strong:    var(--line-strong);
  --border-soft:      var(--line-soft);
  --focus-ring:       var(--gold);

  --link:             var(--navy-700);
  --link-hover:       var(--gold-deep);
}