/* ============================================================
   AXIS WEBPRO | TOKENS.CSS
   Generated from: _DESIGN_SYSTEM/brand-manifest.json v1.0.1
   Generated on: 2026-05-19
   Architecture: 3-tier (palette → semantic → component)

   Layered output (both derive from the manifest):
   - tokens.css (this file): frontend CSS layer, applied to all pages and components
   - theme.json: Gutenberg block editor layer, maps tokens to WP preset slugs
   To change a value: edit the manifest, regenerate both files.

   DO NOT EDIT MANUALLY. Edit the manifest, regenerate.
   ============================================================ */

:root {
  /* ----------------------------------------
     TIER 1 | PALETTE (raw values)
     ---------------------------------------- */
  /* Colors */
  --color-navy-900: #0C1F3F;
  --color-blue-500: #1A6EF2;
  --color-orange-500: #F05A28;
  --color-offwhite-50: #F8F9FB;
  --color-charcoal-900: #1A1A2E;
  --color-white: #FFFFFF;
  --color-muted-700: #4E5A72;
  --color-muted-500: #6B7691;

  /* Spacing scale (base 4px) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* Breakpoints (em-based, mobile-first) */
  --bp-sm: 30em;
  --bp-md: 48em;
  --bp-lg: 64em;
  --bp-xl: 80em;
  --bp-2xl: 96em;

  /* Touch targets */
  --touch-min: 44px;
  --touch-default: 48px;
  --touch-primary: 56px;
  --touch-gap: 8px;

  /* Motion */
  --motion-duration-base: 200ms;
  --motion-duration-slow: 400ms;
  --motion-easing: cubic-bezier(.16, 1, .3, 1);

  /* Elevation (5-level shadow ladder) */
  --shadow-1: 0 1px 2px rgba(12, 31, 63, 0.06);
  --shadow-2: 0 2px 6px rgba(12, 31, 63, 0.08);
  --shadow-3: 0 6px 16px rgba(12, 31, 63, 0.10);
  --shadow-4: 0 12px 32px rgba(12, 31, 63, 0.14);
  --shadow-5: 0 24px 64px rgba(12, 31, 63, 0.18);

  /* Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-pill: 9999px;

  /* Typography raw */
  --font-primary: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --fw-regular: 400;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Fluid type scale */
  --fs-body: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --fs-small: clamp(0.875rem, 0.85rem + 0.125vw, 0.95rem);
  --fs-h1: clamp(2rem, 1.5rem + 2.5vw, 3.5rem);
  --fs-h2: clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem);
  --fs-h3: clamp(1.25rem, 1.1rem + 0.75vw, 1.75rem);
  --fs-h4: clamp(1.125rem, 1.05rem + 0.375vw, 1.375rem);
  --fs-display: clamp(2.5rem, 1.5rem + 5vw, 5rem);

  /* Line height */
  --lh-tight: 1.2;
  --lh-body: 1.5;
  --lh-long-form: 1.65;

  /* Reading width */
  --max-inline-body: 66ch;

  /* ----------------------------------------
     TIER 2 | SEMANTIC (the system uses these)
     ---------------------------------------- */
  --color-primary: var(--color-navy-900);
  --color-secondary: var(--color-blue-500);
  --color-accent: var(--color-orange-500);
  --color-surface: var(--color-offwhite-50);
  --color-base: var(--color-white);

  --color-text-body: var(--color-charcoal-900);
  --color-text-on-primary: var(--color-white);
  --color-text-on-accent: var(--color-white);
  --color-text-muted: var(--color-muted-700);
  --color-text-tertiary: var(--color-muted-500);

  --color-border-subtle: var(--color-muted-500);
  --color-focus-ring: var(--color-blue-500);

  /* Section padding (mobile / desktop) */
  --space-section-mobile: var(--space-7);          /* 48px (was 64px / space-8) | 2026-05-20 polish */
  --space-section-desktop: 80px;                    /* 80px (was 96px / space-9) | 2026-05-20 polish */
  --space-card-padding: var(--space-5);
  --space-button-padding-y: var(--space-3);
  --space-button-padding-x: var(--space-5);

  /* ----------------------------------------
     TIER 3 | COMPONENT (per-component)
     ---------------------------------------- */
  /* Button | primary */
  --btn-primary-bg: var(--color-accent);
  --btn-primary-text: var(--color-text-on-accent);
  --btn-primary-bg-hover: #D94F22;  /* tier 1 hover variant of orange-500, darker 8% */
  --btn-primary-radius: var(--radius-md);
  --btn-primary-min-height: var(--touch-primary);

  /* Button | secondary (outline on primary) */
  --btn-secondary-bg: transparent;
  --btn-secondary-text: var(--color-text-on-primary);
  --btn-secondary-border: var(--color-text-on-primary);
  --btn-secondary-radius: var(--radius-md);
  --btn-secondary-min-height: var(--touch-default);

  /* Card */
  --card-bg: var(--color-base);
  --card-padding: var(--space-card-padding);
  --card-radius: var(--radius-lg);
  --card-shadow: var(--shadow-2);
  --card-shadow-hover: var(--shadow-3);
  --card-border: 1px solid var(--color-border-subtle);

  /* Hero */
  --hero-bg-gradient: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  --hero-text: var(--color-text-on-primary);
  --hero-eyebrow: var(--color-accent);

  /* Trust block */
  --trust-bar-bg: var(--color-surface);
  --trust-bar-text: var(--color-text-body);
  --trust-bar-icon: var(--color-accent);

  /* Form */
  --form-input-bg: var(--color-base);
  --form-input-border: var(--color-border-subtle);
  --form-input-border-focus: var(--color-focus-ring);
  --form-input-text: var(--color-text-body);
  --form-input-min-height: var(--touch-default);
  --form-input-radius: var(--radius-md);
  --form-input-font-size: 16px;  /* iOS zoom prevention floor */

  /* Eyebrow
     Recolored from --color-accent (orange #F05A28) to --color-primary
     (navy #0C1F3F) on 2026-05-22 to clear WCAG 4.5:1 on light surfaces.
     Orange on offwhite computed 3.21:1; orange on white 3.38:1 at the
     14px bold rendered size. Both fail the 4.5:1 floor. Hero, kpi-band,
     hero-audit, and service-detail kpi sections override .eyebrow with
     their own orange on navy color, which clears 4.5:1 and is unaffected. */
  --eyebrow-color: var(--color-primary);
  --eyebrow-tracking: 0.08em;
  --eyebrow-weight: var(--fw-bold);
  --eyebrow-transform: uppercase;
}

/* ============================================================
   PER-CLIENT OVERRIDE HOOK
   Empty for axis-webpro (this IS the master). Future client
   builds override specific tokens via body[data-client="..."].
   ============================================================ */
body[data-client="axis-webpro"] {
  /* No overrides. This is the master reference. */
}

/* ============================================================
   REDUCED MOTION
   Honors user preference globally.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0ms !important;
    scroll-behavior: auto !important;
  }
}