/**
 * axsysTek V4 — Design Tokens
 * Subtheme: axsystek_sandbox
 * Version: 1.0.0 | October 2026
 * Design Direction: "Controlled Velocity" — LOCKED Oct 12, 2026
 *
 * DO NOT EDIT — Source of truth for all V4 color, typography,
 * spacing, and motion values. Edit here, nowhere else.
 */

/* ============================================================
   1. BRAND COLORS — axsysTek Palette (LOCKED)
   ============================================================ */

:root {

  /* — Primary Brand Blue — CONFIRMED from axsysTek brand assets — */
  --color-blue:        #1950D7;   /* axsysTek Blue — hero, nav, CTAs, section anchors */
  --color-blue-dk:     #0F3BAB;   /* Blue Dark — hover/pressed states, gradient deep end */
  --color-blue-lt:     #3A6FE8;   /* Blue Light — gradient light end, tinted backgrounds */

  /* — Deep Navy — Depth Anchor — */
  --color-navy:        #002A5C;   /* Footer, Trust Strip, darkest dark sections */

  /* — Signal Orange — Primary Accent / CTA — */
  --color-orange:      #E8530A;   /* Primary CTA, active states, hover accents */
  --color-orange-lt:   #FF7A3D;   /* Hover gradients, lighter orange fills */

  /* — Extended Neutral Palette — */
  --color-ink:         #0D1117;   /* Body text on light backgrounds */
  --color-slate:       #1E3A5F;   /* Secondary dark, card backgrounds in dark sections */
  --color-sky:         #E8F2FB;   /* Light section wash, callout boxes */
  --color-linen:       #F7F4EF;   /* Warm off-white, alternating section backgrounds */
  --color-mid:         #6B7A8D;   /* Secondary text, metadata, captions */
  --color-border:      #D8E0EA;   /* Dividers, card borders, form field lines */
  --color-white:       #FFFFFF;   /* Text on dark sections, card surfaces */
  --color-amber:       #C07840;   /* Bench section accent, testimonial pull-quotes */
  --color-black:       #000000;   /* True black — use sparingly */

  /* — Semantic Aliases — */
  --color-bg-primary:     var(--color-white);
  --color-bg-alt:         var(--color-linen);
  --color-bg-dark:        var(--color-blue);
  --color-bg-darker:      var(--color-navy);
  --color-bg-callout:     var(--color-sky);
  --color-text-primary:   var(--color-ink);
  --color-text-secondary: var(--color-mid);
  --color-text-on-dark:   var(--color-white);
  --color-text-accent:    var(--color-blue);
  --color-text-cta:       var(--color-orange);
  --color-border-default: var(--color-border);
  --color-border-focus:   var(--color-blue);
  --color-border-accent:  var(--color-orange);

  /* — Hero Gradient (Phase 1 — launch) — */
  --gradient-hero: linear-gradient(
    135deg,
    var(--color-blue)     0%,
    var(--color-blue-dk)  60%,
    #0A2D7A               100%
  );

  /* — Hero Gradient Mesh (CSS animated — launch state) — */
  --gradient-hero-mesh:
    radial-gradient(ellipse at 20% 50%, rgba(58, 111, 232, 0.35) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 20%, rgba(232, 83, 10, 0.20) 0%, transparent 50%),
    radial-gradient(ellipse at 60% 80%, rgba(15, 59, 171, 0.40) 0%, transparent 55%),
    var(--gradient-hero);

  /* — Button & Interactive Gradient — */
  --gradient-cta: linear-gradient(135deg, var(--color-orange) 0%, var(--color-orange-lt) 100%);
  --gradient-blue-btn: linear-gradient(135deg, var(--color-blue) 0%, var(--color-blue-dk) 100%);

/* ============================================================
   2. TYPOGRAPHY — LOCKED (Syne / Inter / IBM Plex Mono)
   ============================================================ */

  /* — Font Families — */
  --font-display:  'Syne', sans-serif;         /* 700–800 ExtraBold: headlines, hero, section anchors */
  --font-body:     'Inter', sans-serif;         /* 400–700: all body text, UI labels, nav */
  --font-mono:     'IBM Plex Mono', monospace; /* 400–500: stats, data labels, code/meta */

  /* — Font Weights — */
  --fw-regular:    400;
  --fw-medium:     500;
  --fw-semibold:   600;
  --fw-bold:       700;
  --fw-extrabold:  800;

  /* — Fluid Type Scale (CSS clamp: mobile → desktop) — */
  --text-xs:    clamp(0.75rem,   0.7rem   + 0.20vw,  0.8125rem); /* 12–13px */
  --text-sm:    clamp(0.875rem,  0.82rem  + 0.30vw,  0.9375rem); /* 14–15px */
  --text-base:  clamp(1rem,      0.95rem  + 0.35vw,  1.0625rem); /* 16–17px */
  --text-lg:    clamp(1.125rem,  1.05rem  + 0.50vw,  1.25rem);   /* 18–20px */
  --text-xl:    clamp(1.25rem,   1.1rem   + 0.80vw,  1.5rem);    /* 20–24px */
  --text-2xl:   clamp(1.5rem,    1.25rem  + 1.50vw,  2rem);      /* 24–32px */
  --text-3xl:   clamp(1.875rem,  1.5rem   + 2.00vw,  2.5rem);    /* 30–40px */
  --text-4xl:   clamp(2.25rem,   1.75rem  + 2.80vw,  3.25rem);   /* 36–52px */
  --text-5xl:   clamp(2.75rem,   2rem     + 4.00vw,  4.5rem);    /* 44–72px */
  --text-hero:  clamp(3.25rem,   2.5rem   + 5.00vw,  6rem);      /* 52–96px */

  /* — Line Heights — */
  --lh-tight:   1.1;
  --lh-snug:    1.25;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;
  --lh-loose:   1.8;

  /* — Letter Spacing — */
  --ls-tight:   -0.03em;
  --ls-normal:   0em;
  --ls-wide:     0.03em;
  --ls-wider:    0.06em;
  --ls-widest:   0.12em;   /* section overline labels */

/* ============================================================
   3. SPACING — 4px base grid
   ============================================================ */

  --space-1:   0.25rem;   /*  4px */
  --space-2:   0.5rem;    /*  8px */
  --space-3:   0.75rem;   /* 12px */
  --space-4:   1rem;      /* 16px */
  --space-5:   1.25rem;   /* 20px */
  --space-6:   1.5rem;    /* 24px */
  --space-8:   2rem;      /* 32px */
  --space-10:  2.5rem;    /* 40px */
  --space-12:  3rem;      /* 48px */
  --space-16:  4rem;      /* 64px */
  --space-20:  5rem;      /* 80px */
  --space-24:  6rem;      /* 96px */
  --space-32:  8rem;      /* 128px */
  --space-40:  10rem;     /* 160px */
  --space-48:  12rem;     /* 192px */
  --space-64:  16rem;     /* 256px */

  /* — Section Vertical Padding — */
  --section-py-sm:  clamp(var(--space-10), 5vw, var(--space-16));  /* tight: trust strip, stats */
  --section-py:     clamp(var(--space-16), 8vw, var(--space-24));  /* standard sections */
  --section-py-lg:  clamp(var(--space-20), 10vw, var(--space-32)); /* hero, major sections */

/* ============================================================
   4. LAYOUT — Container & Grid
   ============================================================ */

  /* — Container Widths — */
  --container-xs:   480px;
  --container-sm:   640px;
  --container-md:   768px;
  --container-lg:   1024px;
  --container-xl:   1280px;
  --container-2xl:  1320px;  /* max site width */

  /* — Gutter — */
  --gutter:         clamp(1rem, 3vw, 1.5rem);  /* responsive horizontal page padding */

  /* — Grid Columns — */
  --grid-cols-2:    repeat(2, 1fr);
  --grid-cols-3:    repeat(3, 1fr);
  --grid-cols-4:    repeat(4, 1fr);
  --grid-gap:       clamp(1rem, 2vw, 1.5rem);
  --grid-gap-lg:    clamp(1.5rem, 3vw, 2rem);

/* ============================================================
   5. BORDERS & RADIUS
   ============================================================ */

  --radius-sm:   2px;
  --radius:      4px;    /* buttons, cards (tight, professional) */
  --radius-md:   6px;
  --radius-lg:   8px;
  --radius-xl:   12px;
  --radius-2xl:  16px;
  --radius-pill: 9999px;

  --border-width:       1px;
  --border-width-thick: 2px;
  --border-width-hero:  4px;  /* left accent on highlighted cards */

/* ============================================================
   6. SHADOWS
   ============================================================ */

  --shadow-xs:  0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-sm:  0 2px 4px rgba(0, 0, 0, 0.08);
  --shadow:     0 4px 12px rgba(0, 0, 0, 0.10);
  --shadow-md:  0 8px 24px rgba(0, 0, 0, 0.12);
  --shadow-lg:  0 16px 40px rgba(0, 0, 0, 0.14);
  --shadow-xl:  0 24px 64px rgba(0, 0, 0, 0.18);

  /* — Blue-tinted card shadow (dark sections) — */
  --shadow-blue: 0 8px 24px rgba(25, 80, 215, 0.20);
  --shadow-blue-lg: 0 16px 48px rgba(25, 80, 215, 0.28);

/* ============================================================
   7. MOTION & TRANSITIONS
   ============================================================ */

  /* — Duration — */
  --duration-instant:  80ms;
  --duration-fast:     150ms;
  --duration-default:  200ms;
  --duration-medium:   300ms;
  --duration-slow:     500ms;
  --duration-hero:     600ms;    /* hero headline entrance */
  --duration-counter:  1200ms;   /* stat counter count-up */

  /* — Easing — */
  --ease-default:      cubic-bezier(0.4, 0, 0.2, 1);    /* Material standard */
  --ease-in:           cubic-bezier(0.4, 0, 1, 1);
  --ease-out:          cubic-bezier(0, 0, 0.2, 1);
  --ease-bounce:       cubic-bezier(0.34, 1.56, 0.64, 1); /* subtle overshoot */

  /* — Common Transition Combos — */
  --transition-default: all var(--duration-default) var(--ease-default);
  --transition-fast:    all var(--duration-fast)    var(--ease-default);
  --transition-color:   color var(--duration-default) var(--ease-default),
                        background-color var(--duration-default) var(--ease-default),
                        border-color var(--duration-default) var(--ease-default);
  --transition-transform: transform var(--duration-default) var(--ease-out);

/* ============================================================
   8. Z-INDEX SCALE
   ============================================================ */

  --z-base:      0;
  --z-above:     10;
  --z-dropdown:  100;
  --z-sticky:    200;
  --z-fixed:     300;
  --z-overlay:   400;
  --z-modal:     500;
  --z-toast:     600;

/* ============================================================
   9. NAVIGATION
   ============================================================ */

  --nav-height:         72px;
  --nav-height-mobile:  60px;
  --nav-bg:             var(--color-blue);           /* solid after scroll */
  --nav-bg-transparent: transparent;                 /* over hero */
  --nav-text:           var(--color-white);
  --nav-text-hover:     rgba(255, 255, 255, 0.80);
  --nav-cta-bg:         var(--color-orange);
  --nav-cta-text:       var(--color-white);
  --mega-nav-bg:        var(--color-navy);           /* deeper than nav bar */
  --mega-nav-border:    rgba(255, 255, 255, 0.10);

/* ============================================================
   10. BUTTONS
   ============================================================ */

  /* — Base button — */
  --btn-radius:          var(--radius);
  --btn-padding-y:       0.875rem;    /* 14px */
  --btn-padding-x:       1.75rem;     /* 28px */
  --btn-font:            var(--font-body);
  --btn-font-size:       var(--text-sm);   /* 14–15px */
  --btn-font-weight:     var(--fw-semibold);
  --btn-letter-spacing:  var(--ls-wide);  /* 0.03em */
  --btn-transition:      var(--transition-default);

  /* — Primary CTA (Signal Orange) — */
  --btn-primary-bg:      var(--color-orange);
  --btn-primary-text:    var(--color-white);
  --btn-primary-bg-hover: var(--color-orange-lt);

  /* — Secondary (Blue filled) — */
  --btn-secondary-bg:    var(--color-blue);
  --btn-secondary-text:  var(--color-white);
  --btn-secondary-bg-hover: var(--color-blue-dk);

  /* — Ghost (White outline — for dark sections) — */
  --btn-ghost-bg:        transparent;
  --btn-ghost-text:      var(--color-white);
  --btn-ghost-border:    rgba(255, 255, 255, 0.60);
  --btn-ghost-bg-hover:  rgba(255, 255, 255, 0.10);
  --btn-ghost-border-hover: var(--color-white);

  /* — Outline (Blue outline — for light sections) — */
  --btn-outline-bg:      transparent;
  --btn-outline-text:    var(--color-blue);
  --btn-outline-border:  var(--color-blue);
  --btn-outline-bg-hover: var(--color-blue);
  --btn-outline-text-hover: var(--color-white);

/* ============================================================
   11. CARDS
   ============================================================ */

  --card-bg:             var(--color-white);
  --card-border:         var(--color-border);
  --card-radius:         var(--radius-lg);
  --card-shadow:         var(--shadow-sm);
  --card-shadow-hover:   var(--shadow-md);
  --card-padding:        clamp(1.25rem, 3vw, 1.75rem);
  --card-accent-border:  var(--color-orange);  /* left border on hover */
  --card-lift:           -4px;                 /* translateY on hover */

  /* — Dark section cards (navy/slate bg) — */
  --card-dark-bg:        var(--color-slate);
  --card-dark-border:    rgba(255, 255, 255, 0.08);
  --card-dark-shadow:    var(--shadow-blue);

/* ============================================================
   12. HERO
   ============================================================ */

  --hero-min-height:          clamp(520px, 85vh, 900px);
  --hero-bg:                  var(--color-blue);
  --hero-gradient:            var(--gradient-hero-mesh);
  --hero-overlay:             rgba(0, 0, 0, 0.25);  /* for carousel/video phases */
  --hero-text:                var(--color-white);
  --hero-label-color:         var(--color-orange);
  --hero-label-font:          var(--font-body);
  --hero-label-weight:        var(--fw-bold);
  --hero-label-spacing:       var(--ls-widest);
  --hero-headline-font:       var(--font-display);
  --hero-headline-weight:     var(--fw-extrabold);
  --hero-headline-size:       var(--text-hero);
  --hero-headline-lh:         var(--lh-tight);
  --hero-headline-ls:         -0.02em;
  --hero-subtext-opacity:     0.85;
  --hero-stagger-delay:       100ms;   /* between animated headline words */

/* ============================================================
   13. SECTIONS — Background Palette
   ============================================================ */

  /* Map: Section # → background per V4 homepage spec */
  --section-nav-bg:       var(--color-blue);
  --section-hero-bg:      var(--color-blue);
  --section-trust-bg:     var(--color-navy);
  --section-services-bg:  var(--color-linen);
  --section-air-bg:       var(--color-blue);
  --section-stories-bg:   var(--color-white);
  --section-industries-bg: var(--color-linen);
  --section-stats-bg:     var(--color-orange);
  --section-insights-bg:  var(--color-white);
  --section-cta-bg:       var(--color-blue);
  --section-footer-bg:    var(--color-navy);

/* ============================================================
   14. WAVE SVG — Footer Transition (LOCKED: footer only)
   ============================================================ */

  --wave-height:          60px;
  --wave-color-from:      var(--color-blue);   /* CTA Band */
  --wave-color-to:        var(--color-navy);   /* Footer */
  --wave-bg-size:         cover;
  --wave-bg-repeat:       no-repeat;

/* ============================================================
   15. FOOTER
   ============================================================ */

  --footer-bg:              var(--color-navy);
  --footer-text:            rgba(255, 255, 255, 0.75);
  --footer-text-strong:     var(--color-white);
  --footer-link:            rgba(255, 255, 255, 0.65);
  --footer-link-hover:      var(--color-white);
  --footer-border:          rgba(255, 255, 255, 0.12);
  --footer-logo-opacity:    0.90;
  --footer-social-bg:       rgba(255, 255, 255, 0.10);
  --footer-social-bg-hover: var(--color-blue);

/* ============================================================
   16. FORMS
   ============================================================ */

  --input-bg:              var(--color-white);
  --input-border:          var(--color-border);
  --input-border-focus:    var(--color-blue);
  --input-shadow-focus:    0 0 0 3px rgba(25, 80, 215, 0.18);
  --input-text:            var(--color-ink);
  --input-placeholder:     var(--color-mid);
  --input-radius:          var(--radius);
  --input-padding-y:       0.75rem;
  --input-padding-x:       1rem;
  --input-font-size:       var(--text-base);
  --label-font-weight:     var(--fw-semibold);
  --label-font-size:       var(--text-sm);
  --label-color:           var(--color-ink);

/* ============================================================
   17. BADGES & LABELS
   ============================================================ */

  --badge-font:            var(--font-body);
  --badge-font-size:       var(--text-xs);
  --badge-font-weight:     var(--fw-bold);
  --badge-letter-spacing:  var(--ls-widest);
  --badge-text-transform:  uppercase;
  --badge-padding:         0.25em 0.65em;
  --badge-radius:          var(--radius-sm);

  /* — Blue badge (services, industries) — */
  --badge-blue-bg:         rgba(25, 80, 215, 0.10);
  --badge-blue-text:       var(--color-blue);

  /* — Orange badge (CTA, featured) — */
  --badge-orange-bg:       rgba(232, 83, 10, 0.10);
  --badge-orange-text:     var(--color-orange);

  /* — Inverted (on dark backgrounds) — */
  --badge-dark-bg:         rgba(255, 255, 255, 0.12);
  --badge-dark-text:       var(--color-white);

/* ============================================================
   18. ICONS
   ============================================================ */

  --icon-size-sm:    20px;
  --icon-size:       24px;
  --icon-size-lg:    32px;
  --icon-size-xl:    40px;   /* service card icons */
  --icon-size-hero:  48px;

  --icon-color-primary:   var(--color-blue);
  --icon-color-accent:    var(--color-orange);
  --icon-color-on-dark:   var(--color-white);
  --icon-color-muted:     var(--color-mid);

/* ============================================================
   19. BREAKPOINTS (reference — use in JS; CSS uses media queries)
   ============================================================ */

  --bp-xs:  576px;
  --bp-sm:  768px;
  --bp-md:  992px;
  --bp-lg:  1200px;
  --bp-xl:  1400px;

/* ============================================================
   20. ACCESSIBILITY
   ============================================================ */

  --focus-ring-width:     3px;
  --focus-ring-offset:    2px;
  --focus-ring-color:     var(--color-orange);
  --focus-ring:           0 0 0 var(--focus-ring-width) var(--focus-ring-color);

  /* Minimum touch target size */
  --touch-target:         44px;

} /* end :root */

/* ============================================================
   DARK SECTION OVERRIDES
   Apply .section--dark on any section with dark background
   ============================================================ */

.section--dark {
  --color-text-primary:    var(--color-white);
  --color-text-secondary:  rgba(255, 255, 255, 0.70);
  --color-text-accent:     var(--color-orange);
  --color-border-default:  rgba(255, 255, 255, 0.12);
  --card-bg:               var(--color-slate);
  --card-border:           rgba(255, 255, 255, 0.08);
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-instant:  0ms;
    --duration-fast:     0ms;
    --duration-default:  0ms;
    --duration-medium:   0ms;
    --duration-slow:     0ms;
    --duration-hero:     0ms;
    --duration-counter:  0ms;
    --transition-default:  none;
    --transition-fast:     none;
    --transition-color:    none;
    --transition-transform: none;
  }
}