/* ============================================================
   Seil Coffee — Color Tokens
   Source: SEIL Brand Presentation (Color Palette)
   Company colours: Blue 13.70.120 · Gold 225.158.39 · Brown 59.24.06
   Secondary: Black 0.0.0 · Off-white 249.249.249
   Plus the "Hills of Uganda" greens + pattern cream.
   ============================================================ */
:root {
  /* ---- Brand primaries (base values) ---- */
  --seil-blue:  #0d4678;   /* primary — Seil Blue (the sea/sail) */
  --seil-gold:  #e19e27;   /* accent  — Harvest Gold (the sun/bean) */
  --seil-brown: #3b1806;   /* deep    — Espresso Brown (the roast) */

  /* ---- Seil Blue scale ---- */
  --blue-50:  #f1f6fb;
  --blue-100: #e4eef7;
  --blue-200: #c2d8ec;
  --blue-300: #92b6db;
  --blue-400: #4d83b6;
  --blue-500: #1d5d97;
  --blue-600: #11507f;
  --blue-700: #0d4678;   /* base */
  --blue-800: #0a3760;
  --blue-900: #072a4a;
  --blue-950: #04192e;

  /* ---- Harvest Gold scale ---- */
  --gold-50:  #fef9ef;
  --gold-100: #fcf2dd;
  --gold-200: #f8e4bb;
  --gold-300: #f2d094;
  --gold-400: #ebbb63;
  --gold-500: #e5a93f;
  --gold-600: #e19e27;   /* base */
  --gold-700: #c1821c;
  --gold-800: #98641a;
  --gold-900: #6f4915;

  /* ---- Espresso Brown scale ---- */
  --brown-300: #8a6244;
  --brown-500: #5c3a1d;
  --brown-700: #3b1806;   /* base */
  --brown-900: #2a1004;

  /* ---- Hills of Uganda greens ---- */
  --green-300: #5fa088;   /* sage */
  --green-500: #2f8267;   /* hill */
  --green-700: #1e5a52;   /* deep teal */

  /* ---- Neutrals ---- */
  --black:     #000000;
  --off-white: #f9f9f9;
  --cream:     #f4deb3;   /* wheat — the light shapes in the pattern */
  --paper:     #fbf7ef;   /* warm paper background */
  --ink:       #1a1410;   /* near-black warm text */

  --gray-100: #ececec;
  --gray-200: #dcdad6;
  --gray-300: #c3c0ba;
  --gray-400: #9b978f;
  --gray-500: #6f6b63;
  --gray-600: #4c4842;

  /* ---- Brand gradient (blue → gold, 65% pivot) ---- */
  --gradient-brand: linear-gradient(105deg, var(--seil-blue) 0%, var(--blue-600) 35%, var(--gold-600) 100%);
  --gradient-hills: linear-gradient(180deg, var(--green-500) 0%, var(--green-700) 100%);
  --gradient-sky:   linear-gradient(180deg, var(--blue-700) 0%, var(--blue-900) 100%);

  /* ============================================================
     Semantic aliases — reference these in product UI
     ============================================================ */
  --color-primary:        var(--seil-blue);
  --color-primary-hover:  var(--blue-800);
  --color-primary-active: var(--blue-900);
  --color-accent:         var(--seil-gold);
  --color-accent-hover:   var(--gold-700);
  --color-accent-active:  var(--gold-800);
  --color-roast:          var(--seil-brown);

  --surface-page:    var(--paper);
  --surface-card:    #ffffff;
  --surface-sunken:  var(--gold-50);
  --surface-inverse: var(--seil-blue);
  --surface-roast:   var(--seil-brown);

  --text-strong:  var(--seil-blue);
  --text-body:    var(--ink);
  --text-muted:   var(--gray-500);
  --text-inverse: var(--off-white);
  --text-on-accent: var(--seil-blue);

  --border:        var(--gray-200);
  --border-strong: var(--seil-blue);
  --border-accent: var(--gold-300);

  --focus-ring: var(--gold-600);

  --success: var(--green-500);
  --info:    var(--seil-blue);
  --warning: var(--gold-600);
}