/* ============================================================================
   Qualified Controls V2 — Design Tokens
   Reverse-engineered from client source HTML (about, buyers guide, industries,
   contact, homepage). Drop this into the theme (e.g. assets/css/tokens.css) and
   enqueue it first so every component can reference var(--qc-*).

   Naming: all custom properties are prefixed --qc- to avoid collisions with the
   client's original un-prefixed names. A compatibility block at the bottom maps
   the original names (--deep-navy, --teal-light, etc.) onto the qc- tokens so
   pasted-in source CSS keeps working during assembly.
   ============================================================================ */

:root {
  /* ---- Brand core colors ---- */
  --qc-deep-navy:        #0D1B2A;  /* primary dark background */
  --qc-navy-mid:         #152238;  /* secondary dark / gradient stop */
  --qc-navy-deep:        #060E1A;  /* footer background */
  --qc-regulatory-teal:  #0F6E56;  /* primary action / CTA base */
  --qc-teal-light:       #14A07A;  /* CTA gradient top / hover / accent */
  --qc-teal-glow:        rgba(15,110,86,0.40); /* CTA shadow */
  --qc-muted-gold:       #D4A852;  /* eyebrows, labels, accent — ON DARK ONLY */
  --qc-gold-light:       #E8C97A;  /* gold gradient stop */
  --qc-clean-white:      #FFFFFF;
  --qc-soft-gray:        #F7F9FB;  /* light section background */

  /* ---- Supporting / text colors ---- */
  --qc-warm-slate:       #2C3E50;  /* default body text on light */
  --qc-compliance-blue:  #1B4F72;  /* secondary accent (buyers guide family) */
  --qc-text-muted:       #6B7280;  /* muted paragraph / captions on light */
  --qc-border-light:     #E5E7EB;  /* light hairline borders / pills */
  --qc-fill-light:       #F3F4F6;  /* light pill / chip fill */

  /* ---- Status colors ---- */
  --qc-alert-amber:      #E8793A;  /* warning / event — ON DARK ONLY */
  --qc-risk-red:         #C0392B;  /* risk / non-compliant */

  /* ---- Accent variants for TEXT ON LIGHT backgrounds ----
     The brand accents are tuned for the deep-navy surfaces and pass comfortably
     there (gold 7.89:1, amber on dark is fine). Reused as text on white they fail
     WCAG at every size: #D4A852 on white is 2.21:1 and #E8793A on white is 2.91:1.
     These darkened variants keep the same hue family and clear 4.5:1 on both white
     and --qc-soft-gray, so use them for any accent TEXT sitting on a light surface.
     Never use them on dark backgrounds; the originals stay the dark-surface tokens.
       --qc-muted-gold-on-light  #8A6420 on white = 5.35:1, on soft gray = 5.07:1
       --qc-alert-amber-on-light #A85014 on white = 5.49:1, on soft gray = 5.20:1 */
  --qc-muted-gold-on-light:  #8A6420;
  --qc-alert-amber-on-light: #A85014;

  /* ---- Data-series colors (charts, sensor legends) ---- */
  --qc-clr-temp:         #1B4F72;
  --qc-clr-humidity:     #0F6E56;
  --qc-clr-pressure:     #6C5CE7;
  --qc-clr-transit:      #D4A852;
  --qc-clr-special:      #14A07A;
  --qc-clr-event:        #E8793A;

  /* ---- Glassmorphism surfaces (on dark) ---- */
  --qc-glass-bg:         rgba(255,255,255,0.04);
  --qc-glass-border:     rgba(255,255,255,0.08);
  --qc-glass-hover:      rgba(255,255,255,0.10);

  /* ---- Text-on-dark opacities ---- */
  --qc-on-dark:          rgba(255,255,255,0.85);
  --qc-on-dark-muted:    rgba(255,255,255,0.70);
  --qc-on-dark-faint:    rgba(255,255,255,0.50);

  /* ---- Typography: families ---- */
  --qc-font-heading: 'Plus Jakarta Sans', system-ui, sans-serif; /* h1-h6, buttons, logo */
  --qc-font-body:    'Source Sans 3', system-ui, sans-serif;     /* body copy */
  --qc-font-mono:    'Source Code Pro', ui-monospace, monospace; /* eyebrows, labels, data */

  /* ---- Typography: weights ---- */
  --qc-fw-light:     300;
  --qc-fw-regular:   400;
  --qc-fw-medium:    500;
  --qc-fw-semibold:  600;
  --qc-fw-bold:      700;   /* default heading weight */
  --qc-fw-extrabold: 800;   /* hero H1 / big stats */

  /* ---- Typography: fluid heading scale ---- */
  /* h1 hero uses clamp so it degrades gracefully on mobile. */
  --qc-h1:           clamp(34px, 5vw, 52px);   /* hero headline, weight 800 */
  --qc-h2:           clamp(30px, 3.6vw, 44px); /* section header, weight 700 */
  --qc-h3:           clamp(18px, 2vw, 24px);   /* card / sub headings, weight 700 */
  --qc-h4:           18px;                      /* small headings, weight 700 */
  --qc-display-stat: clamp(48px, 6vw, 72px);   /* big metric numbers, weight 800 */

  /* ---- Typography: body / detail sizes ---- */
  --qc-text-lg:      19px;   /* hero intro / lead paragraph */
  --qc-text-base:    18px;   /* body copy */
  --qc-text-md:      17px;   /* list items */
  --qc-text-sm:      15px;   /* card body / captions */
  --qc-text-xs:      13px;   /* eyebrow / utility bar */
  --qc-eyebrow:      12px;   /* mono eyebrow / label default */

  /* ---- Typography: line-heights ---- */
  --qc-lh-tight:     1.15;   /* headings */
  --qc-lh-snug:      1.4;
  --qc-lh-body:      1.7;    /* body copy (normalize 1.6/1.7 split to 1.7) */
  --qc-lh-relaxed:   1.85;   /* long-form prose paragraphs */

  /* ---- Eyebrow / mono-label detailing ---- */
  --qc-eyebrow-tracking: 2px;  /* letter-spacing for uppercase mono labels */
  --qc-heading-tracking: -1px; /* negative tracking on large headings */

  /* ---- Layout ---- */
  --qc-container:      1200px; /* default content container */
  --qc-container-wide: 1400px; /* wide sections (guide / industry grids) */
  --qc-container-prose:820px;  /* long-form reading column */
  --qc-gutter:         24px;   /* horizontal container padding */

  /* ---- Section rhythm (vertical padding) ---- */
  --qc-section-y:       120px; /* desktop section top padding */
  --qc-section-y-alt:   100px; /* common alt section padding */
  --qc-section-y-mobile: 80px; /* mobile section top padding */
  --qc-section-y-mobile-b: 60px; /* mobile section bottom padding */

  /* ---- Spacing scale ---- */
  --qc-space-1: 4px;
  --qc-space-2: 8px;
  --qc-space-3: 12px;
  --qc-space-4: 16px;
  --qc-space-5: 24px;
  --qc-space-6: 32px;
  --qc-space-7: 40px;
  --qc-space-8: 48px;
  --qc-space-9: 60px;

  /* ---- Radii ---- */
  --qc-radius-sm:  6px;   /* form inputs */
  --qc-radius-md:  8px;   /* small buttons / chips */
  --qc-radius-lg:  10px;  /* primary buttons */
  --qc-radius-xl:  12px;  /* cards / forms */
  --qc-radius-2xl: 16px;  /* feature cards */
  --qc-radius-3xl: 20px;  /* glass panels */
  --qc-radius-4xl: 24px;  /* hero CTA card */
  --qc-radius-pill: 100px;/* filter pills / tabs */

  /* ---- Shadows ---- */
  --qc-shadow-sm:   0 2px 12px rgba(0,0,0,0.03);
  --qc-shadow-card: 0 8px 40px rgba(0,0,0,0.08);
  --qc-shadow-lift: 0 20px 50px rgba(27,79,114,0.15);
  --qc-shadow-cta:  0 12px 30px rgba(20,160,122,0.30);
  --qc-shadow-cta-hover: 0 20px 40px rgba(20,160,122,0.40);
  --qc-shadow-nav:  0 4px 40px rgba(0,0,0,0.30);

  /* ---- Motion ---- */
  --qc-ease:        cubic-bezier(0.16, 1, 0.3, 1); /* signature "premium" ease */
  --qc-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --qc-dur-fast:    0.3s;
  --qc-dur-med:     0.4s;
  --qc-dur-slow:    0.8s;

  /* ---- Signature gradients ---- */
  --qc-grad-cta:     linear-gradient(135deg, var(--qc-regulatory-teal), var(--qc-teal-light));
  --qc-grad-hero:    linear-gradient(155deg, #0D1B2A, #0F1A30 50%, #0D1B2A);
  --qc-grad-gold:    linear-gradient(135deg, var(--qc-teal-light) 0%, var(--qc-muted-gold) 50%, var(--qc-gold-light) 100%);
  --qc-grad-progress:linear-gradient(90deg, var(--qc-regulatory-teal), var(--qc-teal-light), var(--qc-muted-gold));

  /* ---- Header ---- */
  --qc-nav-h:         80px;  /* nav height at rest */
  --qc-nav-h-compact: 60px;  /* nav height when scrolled */
}

/* ----------------------------------------------------------------------------
   Compatibility aliases — original client variable names mapped onto qc- tokens.
   Lets un-prefixed source CSS (copied from the standalone pages) keep resolving.
   Safe to delete once all pasted CSS has been migrated to --qc-* names.
   ---------------------------------------------------------------------------- */
:root {
  --deep-navy:        var(--qc-deep-navy);
  --navy-mid:         var(--qc-navy-mid);
  --regulatory-teal:  var(--qc-regulatory-teal);
  --teal-light:       var(--qc-teal-light);
  --teal-glow:        var(--qc-teal-glow);
  --compliance-blue:  var(--qc-compliance-blue);
  --warm-slate:       var(--qc-warm-slate);
  --soft-gray:        var(--qc-soft-gray);
  --clean-white:      var(--qc-clean-white);
  --muted-gold:       var(--qc-muted-gold);
  --gold-light:       var(--qc-gold-light);
  --muted-gold-on-light:  var(--qc-muted-gold-on-light);
  --alert-amber:      var(--qc-alert-amber);
  --alert-amber-on-light: var(--qc-alert-amber-on-light);
  --risk-red:         var(--qc-risk-red);
  --glass-bg:         var(--qc-glass-bg);
  --glass-border:     var(--qc-glass-border);
  --glass-hover:      var(--qc-glass-hover);
  --ease:             var(--qc-ease);
  --ease-premium:     var(--qc-ease);
}