/* ============================================================
   Feli Feli — Color Tokens
   "Heritage Reimagined" · rooted in the FB-5009 Bronzite floor.
   A single warm-brown family from near-black to ivory, plus two
   accents (Brass = primary, Forest = secondary). NO cool tones —
   every value carries a warm undertone.
   ============================================================ */
:root {
  /* --- Core neutral palette (9 steps, near-black → ivory) --- */
  --ff-anchor:      #1A1612; /* Deep Anchor  — max depth, premium dark bg */
  --ff-espresso:    #2C2018; /* Espresso     — primary dark, headers, nav */
  --ff-chocolate:   #3B2D20; /* Chocolate    — secondary dark, footer, panels */
  --ff-umber:       #6B5A48; /* Warm Umber   — mid-dark, icon fills, 2ndary text */
  --ff-bronzite:    #8E8478; /* Bronzite ★   — floor reference, anchor midpoint */
  --ff-bronze-mid:  #B09A7C; /* Bronze Mid   — warm tertiary, dividers, texture */
  --ff-pebble:      #C8BFB0; /* Warm Pebble  — light neutral, borders, disabled */
  --ff-linen:       #E8E2D6; /* Linen        — near-white, card bg, rule lines */
  --ff-ivory:       #F5F0E8; /* Ivory        — page base, primary light surface */

  /* --- Warm Brass (primary accent — bronze fleck in the floor) --- */
  --ff-brass-deep:  #8A5520;
  --ff-brass:       #C17F3A;
  --ff-brass-light: #DBA458;

  /* --- Forest Green (secondary accent — West African vegetation) --- */
  --ff-forest-deep: #2E4228;
  --ff-forest:      #4A6741;
  --ff-forest-light:#6A8F5F;

  /* --- Functional / communication states (all warm-toned) --- */
  --ff-success: #4A6741; /* matches Forest */
  --ff-warning: #C17F3A; /* matches Brass  */
  --ff-error:   #8B3A3A; /* warm red       */
  --ff-info:    #3A5C6B; /* warm slate (only cool-leaning value, info only) */

  /* --- Digital tint ramps (mix over Ivory) --- */
  --ff-espresso-70: color-mix(in srgb, var(--ff-espresso) 70%, var(--ff-ivory));
  --ff-espresso-50: color-mix(in srgb, var(--ff-espresso) 50%, var(--ff-ivory));
  --ff-espresso-15: color-mix(in srgb, var(--ff-espresso) 15%, var(--ff-ivory));
  --ff-brass-60:    color-mix(in srgb, var(--ff-brass) 60%, var(--ff-ivory));
  --ff-brass-15:    color-mix(in srgb, var(--ff-brass) 15%, var(--ff-ivory));
  --ff-forest-15:   color-mix(in srgb, var(--ff-forest) 15%, var(--ff-ivory));

  /* ============================================================
     SEMANTIC ALIASES — reference these in product code.
     ============================================================ */

  /* Surfaces */
  --surface-page:      var(--ff-ivory);   /* never pure #FFF — warmth is required */
  --surface-card:      #FBF8F2;           /* slightly lifted off Ivory page */
  --surface-sunken:    var(--ff-linen);
  --surface-dark:      var(--ff-espresso); /* primary dark surface */
  --surface-dark-deep: var(--ff-anchor);   /* premium / hero dark */
  --surface-dark-alt:  var(--ff-chocolate);/* footer, sidebars, subpanels */
  --surface-forest:    var(--ff-forest);   /* poster & signage fields only */

  /* Text on light */
  --text-primary:   var(--ff-espresso);
  --text-body:      #3A2E24;
  --text-secondary: var(--ff-umber);
  --text-muted:     #8A7A66;
  --text-disabled:  var(--ff-pebble);

  /* Text on dark */
  --text-on-dark:        var(--ff-ivory);
  --text-on-dark-muted:  var(--ff-bronze-mid);
  --text-on-dark-subtle: #80715F;

  /* Accent (Brass) */
  --accent:        var(--ff-brass);
  --accent-hover:  var(--ff-brass-deep);
  --accent-light:  var(--ff-brass-light);
  --on-accent:     var(--ff-espresso);  /* Ink on Brass ✓ */

  /* Borders / lines */
  --border:        var(--ff-pebble);  /* input borders, dividers on light */
  --border-strong: var(--ff-bronze-mid);
  --border-rule:   var(--ff-linen);   /* hairline rule lines */
  --border-on-dark: rgba(245,240,232,0.14);
  --divider:       rgba(44,32,24,0.10);

  /* Focus ring */
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--ff-brass) 45%, transparent);
}