/* ============================================================
   GSD Utility Solutions — Brand Design Tokens
   Source of truth for color. Change brand colors HERE only.
   Derived from logo: flame #F26722, lightning bolt #FECD06.
   All pairings below are WCAG-checked (see notes inline).
   ============================================================ */

:root {
  /* --- Raw brand scales (the palette) ------------------------ */
  --orange-50:  #FEF3ED;
  --orange-100: #FDE4D7;
  --orange-200: #FAC5AB;
  --orange-300: #F7A47A;
  --orange-400: #F4824A;
  --orange-500: #F26722; /* brand flame */
  --orange-600: #D35A1E;
  --orange-700: #B44E1A; /* AA text on white (5.2:1) */
  --orange-800: #954116;
  --orange-900: #783513;

  --yellow-50:  #FFFAE6;
  --yellow-100: #FFF4C8;
  --yellow-200: #FFEA96;
  --yellow-300: #FEDE5B;
  --yellow-400: #FED429;
  --yellow-500: #FECD06; /* brand bolt — use with DARK text only */
  --yellow-600: #DCB105;
  --yellow-700: #BE9804;
  --yellow-800: #A07F03;
  --yellow-900: #826603;

  --neutral-0:   #FFFFFF;
  --neutral-50:  #FAF9F8;
  --neutral-100: #F2F0EE;
  --neutral-200: #E2DFDB;
  --neutral-300: #C9C4BE;
  --neutral-400: #A39C94;
  --neutral-500: #7A726A;
  --neutral-600: #574F48;
  --neutral-700: #3A332E;
  --neutral-800: #231F1B;
  --neutral-900: #141210; /* body text on white (18.7:1) */
  --neutral-950: #0B0A09;

  /* --- Semantic tokens (reference these in components) -------- */
  --color-primary:        var(--orange-500);
  --color-primary-hover:  var(--orange-600);
  --color-primary-active: var(--orange-700);
  --color-on-primary:     #FFFFFF;        /* for buttons / large+bold labels */
  --color-link:           var(--orange-700); /* AA for normal-size text on white */

  --color-accent:         var(--yellow-500);
  --color-on-accent:      var(--neutral-900); /* dark text on yellow, always */

  --color-bg:        var(--neutral-0);
  --color-surface:   var(--neutral-50);
  --color-surface-2: var(--neutral-100);
  --color-border:    var(--neutral-200);
  --color-border-strong: var(--neutral-300);

  --color-text:        var(--neutral-900);
  --color-text-muted:  var(--neutral-600);
  --color-text-subtle: var(--neutral-500);
  --color-on-dark:     #FFFFFF;

  /* --- Status (adjust freely; kept distinct from brand) ------- */
  --color-success:    #1E8E3E;
  --color-warning:    var(--yellow-500); /* dark text on top */
  --color-danger:     #C62828;
  --color-info:       #1565C0;

  /* --- Surfaces: band rhythm (light) --------------------------
     The site alternates band backgrounds for pacing. The floor is
     white (--color-bg); the two warm neutrals add subtle warmth
     beside the orange brand without going full cream. The dark
     bands are a deliberate design surface (NOT dark mode) and
     reuse the near-black neutral ramp. */
  --color-canvas:                var(--neutral-0);   /* page floor (white)         */
  --color-band-warm:             var(--neutral-50);  /* soft alternating band      */
  --color-band-card:             var(--neutral-100); /* feature / content cards    */

  --color-surface-dark:          var(--neutral-900); /* dark product / footer band */
  --color-surface-dark-elevated: var(--neutral-800); /* raised card on dark        */
  --color-surface-dark-soft:     var(--neutral-950); /* code / inset on dark       */

  /* --- On-dark text & borders ------------------------------- */
  --color-on-dark-muted:   var(--neutral-400);  /* secondary text on dark    */
  --color-border-on-dark:  var(--neutral-700);  /* hairline on dark surfaces  */

  /* --- Signals (telemetry / live) ---------------------------
     Replaces the handoff's teal/amber accents with GSD brand. */
  --color-signal:          var(--color-accent);   /* positive trend — bolt yellow */
  --color-status-live:     var(--color-success);  /* operational / healthy dot     */

  /* --- Color-derived effects (kept in this file) ------------
     Built with color-mix off the tokens above, so no new raw
     value is introduced — change the brand color and these
     follow automatically. */
  --color-focus-ring:  color-mix(in srgb, var(--color-primary) 28%, transparent);
  --color-selection:   color-mix(in srgb, var(--color-primary) 20%, transparent);
  --shadow-soft:       0 1px 3px color-mix(in srgb, var(--neutral-900) 10%, transparent);
  --shadow-dark:       0 24px 60px -32px color-mix(in srgb, var(--neutral-950) 55%, transparent);

  /* --- Translucent UI layers (derived; no new raw value) ----
     Used for sticky-header scrim, glassy tiles and hairlines on
     dark bands, and subtle brand tints. All color-mix off tokens. */
  --color-header-scrim:        color-mix(in srgb, var(--color-bg) 82%, transparent);
  --color-tile-on-dark:        color-mix(in srgb, var(--neutral-0) 6%, transparent);
  --color-tile-on-dark-strong: color-mix(in srgb, var(--neutral-0) 10%, transparent);
  --color-hairline-on-dark:    color-mix(in srgb, var(--neutral-0) 12%, transparent);
  --color-primary-tint:        color-mix(in srgb, var(--color-primary) 12%, transparent);
  --color-accent-tint:         color-mix(in srgb, var(--color-accent) 16%, transparent);
  --color-danger-tint:         color-mix(in srgb, var(--color-danger) 14%, transparent);
}

/* --- Dark sections / dark mode -------------------------------
   Brand colors stay as-is; orange & yellow pop on near-black. */
[data-theme="dark"] {
  --color-bg:        var(--neutral-950);
  --color-surface:   var(--neutral-900);
  --color-surface-2: var(--neutral-800);
  --color-border:    var(--neutral-700);
  --color-border-strong: var(--neutral-600);

  --color-text:        #FFFFFF;
  --color-text-muted:  var(--neutral-300);
  --color-text-subtle: var(--neutral-400);

  --color-link:        var(--orange-400); /* lighter for contrast on dark */
}