/* ============================================================
   COLORS — "Petrol & Brass"
   Base palette values + semantic aliases.
   ============================================================ */
:root {
  /* --- Petrol greens (ink → surfaces) --- */
  --petrol-ink:    #15201D; /* primary text, darkest UI */
  --petrol-deep:   #0F332E; /* hero / dark sections */
  --petrol-dark:   #0A221E; /* footer, deepest panels */
  --petrol-mid:    #244038; /* dark cards / surfaces */
  --slate-green:   #33403B; /* dark cards / surfaces (raised) */

  /* --- Brass accent family --- */
  --brass:         #9C7A2F; /* accent: buttons, links, key UI (large/bold only) */
  --brass-deep:    #7C601F; /* hover; small accent text & links (AA) */
  --champagne:     #D8BE86; /* accent text & fine rules on dark */

  /* --- Sage neutrals --- */
  --sage:          #5D6760; /* secondary / muted text */
  --light-sage:    #9BB0A6; /* muted text on dark */
  --pale-sage:     #BCC4BA; /* borders, hairlines */
  --grey-green:    #D3D8D0; /* borders, hairlines (lighter) */

  /* --- Papers (backgrounds) --- */
  --paper-light:   #E2E7E1; /* light paper background */
  --paper:         #F6F7F3; /* default page background */
  --white:         #FFFFFF;

  /* --- Signature gradient (mark + feature accents only) --- */
  --gradient-signature: linear-gradient(48deg, #0F332E 0%, #9C7A2F 62%, #D8BE86 100%); /* @kind color */

  /* ============================================================
     SEMANTIC ALIASES
     ============================================================ */

  /* Backgrounds */
  --surface-page:        var(--paper);
  --surface-raised:      var(--white);
  --surface-sunken:      var(--paper-light);
  --surface-dark:        var(--petrol-deep);
  --surface-dark-deepest:var(--petrol-dark);
  --surface-card-dark:   var(--petrol-mid);
  --surface-card-dark-2: var(--slate-green);

  /* Text — on paper */
  --text-body:      var(--petrol-ink);
  --text-heading:   var(--petrol-ink);
  --text-muted:     var(--sage);
  --text-link:      var(--brass-deep);   /* small links need AA */
  --text-link-hover:var(--petrol-ink);

  /* Text — on dark */
  --text-on-dark:        var(--paper);
  --text-on-dark-muted:  var(--light-sage);
  --text-on-dark-accent: var(--champagne);

  /* Accent */
  --accent:        var(--brass);
  --accent-hover:  var(--brass-deep);
  --accent-soft:   var(--champagne);

  /* Borders & hairlines */
  --border:        var(--pale-sage);
  --border-strong: var(--sage);
  --border-light:  var(--grey-green);
  --hairline-on-dark: rgba(216, 190, 134, 0.28); /* champagne, low alpha */

  /* Focus ring */
  --focus-ring:    var(--brass-deep);
}