/* ============================================================
   COLOR PALETTE — Flush Fasteners (FF-BRD-STD-100 §02)
   The eight approved colors, the Steel Gray tint scale, plus
   semantic aliases for light ("document") and dark ("web") use.
   ============================================================ */

:root {
  /* ---- Approved palette (canonical hex from the brand book) ---- */
  --ff-ink-black:        #000000;   /* Ink Black */
  --ff-steel-gray:       #606161;   /* Steel Gray */
  --ff-signal-blue:      #1A64AA;   /* Signal Blue — primary accent */
  --ff-deep-navy:        #28306C;   /* Deep Navy */
  --ff-industrial-blue:  #28469A;   /* Industrial Blue */
  --ff-ice:              #F4FBFE;   /* Ice — coolest near-white */
  --ff-mist:             #AAB1B5;   /* Mist — cool gray */
  --ff-pure-white:       #FFFFFF;   /* Pure White */

  /* ---- Steel Gray tint scale (brand book swatch row) ---- */
  --ff-steel-100: #606161;
  --ff-steel-80:  #808181;
  --ff-steel-60:  #A0A0A0;
  --ff-steel-40:  #BFC0C0;
  --ff-steel-20:  #DFDFDF;

  /* ---- Extended neutrals (derived for UI surfaces; cool-leaning
          to match the brand's metal/steel character) ---- */
  --ff-near-black: #0A0A0C;   /* web theme base (matches site theme-color) */
  --ff-graphite:   #16171A;   /* raised dark surface */
  --ff-slate:      #24262B;   /* dark border / divider */
  --ff-fog:        #E4E8EB;   /* light divider */
  --ff-cloud:      #F2F5F7;   /* light app background */

  /* ---- Blue depth ramp (Signal → Industrial → Deep Navy) ---- */
  --ff-blue-bright: #2F7BC9;  /* hover lift on Signal Blue */
  --ff-blue-deep:   #1B2350;  /* deepest navy, near-black blue */

  /* =========================================================
     SEMANTIC ALIASES — LIGHT ("document") is the default.
     The .ff-dark scope below remaps them for the web theme.
     ========================================================= */
  --surface-page:    var(--ff-pure-white);
  --surface-sunken:  var(--ff-cloud);
  --surface-card:    var(--ff-pure-white);
  --surface-raised:  var(--ff-ice);
  --surface-inverse: var(--ff-near-black);

  --text-primary:    var(--ff-ink-black);
  --text-secondary:  var(--ff-steel-gray);
  --text-tertiary:   var(--ff-mist);
  --text-inverse:    var(--ff-pure-white);
  --text-accent:     var(--ff-signal-blue);

  --border-subtle:   var(--ff-fog);
  --border-strong:   var(--ff-steel-40);
  --border-accent:   var(--ff-signal-blue);

  --accent:          var(--ff-signal-blue);
  --accent-hover:    var(--ff-blue-bright);
  --accent-press:    var(--ff-industrial-blue);
  --accent-contrast: var(--ff-pure-white);

  --focus-ring:      var(--ff-signal-blue);
}

/* =========================================================
   DARK / WEB THEME — the live site runs near-black (#0A0A0C).
   Apply class="ff-dark" (or data-theme="dark") to opt in.
   ========================================================= */
.ff-dark,
[data-theme="dark"] {
  --surface-page:    var(--ff-near-black);
  --surface-sunken:  #0E0F12;
  --surface-card:    var(--ff-graphite);
  --surface-raised:  #1C1D21;
  --surface-inverse: var(--ff-pure-white);

  --text-primary:    var(--ff-pure-white);
  --text-secondary:  var(--ff-mist);
  --text-tertiary:   var(--ff-steel-gray);
  --text-inverse:    var(--ff-ink-black);
  --text-accent:     var(--ff-blue-bright);

  --border-subtle:   var(--ff-slate);
  --border-strong:   #34373D;
  --border-accent:   var(--ff-signal-blue);

  --accent:          var(--ff-signal-blue);
  --accent-hover:    var(--ff-blue-bright);
  --accent-press:    var(--ff-industrial-blue);
  --accent-contrast: var(--ff-pure-white);

  --focus-ring:      var(--ff-blue-bright);
}