/* ============================================================
   Rust Truck — Colour tokens
   A bold vintage-poster trio: brick red, amber, and ink-black,
   laid on warm kraft paper. Oxblood is the signature hero tone.
   Author UI against the SEMANTIC aliases at the bottom.
   ============================================================ */

:root {
  /* --- Paper / kraft neutrals (warm, aged) --- */
  --paper-50:  #faf6ee;   /* lightest cream — raised surfaces */
  --paper-100: #f4ece0;   /* cream — primary page background */
  --paper-200: #e9dcc8;   /* kraft — secondary surface */
  --paper-300: #d8c4a6;   /* aged kraft — hairlines, wells */
  --paper-400: #c2a983;   /* deep kraft — disabled, dividers on dark */

  /* --- Black / Ink (a MAIN colour) --- */
  --black:   #0d0b0a;     /* true near-black */
  --ink-900: #141110;     /* primary text & dark surfaces */
  --ink-800: #1d1916;
  --ink-700: #272320;     /* headings, strong borders */
  --ink-600: #46403a;
  --ink-500: #6b6258;     /* secondary / muted text */
  --ink-400: #8f857a;     /* tertiary, captions, placeholders */

  /* --- Brick red (PRIMARY) — #9e3024 --- */
  --brick-800: #46130c;
  --brick-700: #661b11;   /* OXBLOOD — signature hero background */
  --brick-600: #802417;
  --brick-500: #9e3024;   /* PRIMARY brick red */
  --brick-400: #b8463a;
  --brick-300: #cd6c5f;
  --brick-200: #e7b2a9;
  --brick-100: #f5ddd7;

  /* --- Amber / mustard (ACCENT) — #c98a2b --- */
  --amber-800: #6e4612;
  --amber-700: #8f5d17;
  --amber-600: #a9711f;
  --amber-500: #c98a2b;   /* ACCENT amber */
  --amber-400: #dca64e;
  --amber-300: #e8be7b;
  --amber-200: #f2d8a8;
  --amber-100: #f8ebce;

  /* ----------------------------------------------------------
     LEGACY ALIASES — older work references --rust-*, --gold-*
     and --olive-*. They adopt the new trio:
       rust  → brick red (primary)
       gold  → amber (accent)
       olive → charcoal / near-black
     New work should prefer --brick-*, --amber-*, --ink-*.
     ---------------------------------------------------------- */
  --rust-800: var(--brick-800);
  --rust-700: var(--brick-700);
  --rust-600: var(--brick-600);
  --rust-500: var(--brick-500);
  --rust-400: var(--brick-400);
  --rust-300: var(--brick-300);
  --rust-200: var(--brick-200);
  --rust-100: var(--brick-100);

  --gold-700: var(--amber-700);
  --gold-600: var(--amber-600);
  --gold-500: var(--amber-500);
  --gold-400: var(--amber-400);
  --gold-200: var(--amber-200);

  /* olive ramp repurposed as charcoal → black */
  --olive-800: #0d0b0a;
  --olive-700: #15120f;
  --olive-600: #201d19;   /* "secondary" dark */
  --olive-500: #322c27;
  --olive-400: #4b443c;
  --olive-200: #b7afa4;
  --olive-100: #ddd5ca;

  /* --- Functional semantics (kept earthy) --- */
  --leaf-500:  #4f6b3a;   /* success — the only green, functional */
  --leaf-100:  #e0ead0;
  --error-500: #c43d2c;   /* alert red, brighter than brand brick */
  --error-100: #f6ddd7;

  /* ========================================================
     SEMANTIC ALIASES — author UI against these
     ======================================================== */

  /* Surfaces & backgrounds */
  --color-bg:            var(--paper-100);
  --color-bg-sunken:     var(--paper-200);
  --surface-card:        var(--paper-50);
  --surface-raised:      #ffffff;
  --surface-inverse:     var(--ink-900);
  --surface-dark:        var(--ink-900);   /* black sections */
  --surface-oxblood:     var(--brick-700); /* signature hero ground */
  --surface-kraft:       var(--paper-200);

  /* Text */
  --text-heading:        var(--ink-900);
  --text-body:           var(--ink-900);
  --text-muted:          var(--ink-500);
  --text-subtle:         var(--ink-400);
  --text-on-dark:        var(--paper-50);
  --text-on-dark-muted:  var(--paper-300);
  --text-on-primary:     var(--paper-50);

  /* Brand roles — brick / amber / black */
  --color-primary:        var(--brick-500);
  --color-primary-hover:  var(--amber-500);  /* brick → AMBER on hover */
  --color-primary-press:  var(--brick-700);
  --color-on-primary:     var(--paper-50);
  --color-secondary:      var(--ink-900);     /* BLACK as the secondary */
  --color-secondary-hover:var(--black);
  --color-highlight:      var(--amber-500);
  --link:                 var(--brick-600);
  --link-hover:           var(--brick-500);

  /* Lines & borders */
  --border-hairline:     var(--paper-300);
  --border-strong:       var(--ink-900);
  --border-rule:         color-mix(in srgb, var(--ink-900) 20%, transparent);

  /* Feedback */
  --color-success:       var(--leaf-500);
  --color-success-bg:    var(--leaf-100);
  --color-error:         var(--error-500);
  --color-error-bg:      var(--error-100);
  --color-focus-ring:    color-mix(in srgb, var(--brick-500) 55%, transparent);

  /* legacy brick-error names used by some components for the error tone */
  --brick-error-500: var(--error-500);
  --brick-error-100: var(--error-100);
}
