/**
 * site-tokens.css — Axion Communications Global Design System
 *
 * THE SINGLE SOURCE OF TRUTH for every design decision on the site.
 * Change one value here → every page using that token updates automatically.
 *
 * LOAD ORDER: site.css loads first, THEN this file.
 * Later :root blocks override earlier ones via CSS cascade.
 * Rules here win over equal-specificity rules in site.css.
 *
 * ─────────────────────────────────────────────────────────────────
 * HOW TO MAKE GLOBAL CHANGES:
 *   "Change all section spacing"   → --section-spacing
 *   "Change all card radius"       → --card-radius
 *   "Change all card shadows"      → --card-shadow
 *   "Change all card borders"      → --card-border
 *   "Change all H2 sizes"          → --font-h2
 *   "Change all hero buttons"      → --btn-hero-bg, --btn-hero-text
 *   "Change all grid gaps"         → --grid-gap
 *   "Change primary brand colour"  → --color-brand
 * ─────────────────────────────────────────────────────────────────
 * RULES:
 *   ✓  All new reusable classes MUST use the axion- prefix
 *   ✓  Edit a global token BEFORE adding a page-specific override
 *   ✓  Page-specific CSS is for true one-off designs only
 *   ✗  Never use the az- prefix (use axion- instead)
 *   ✗  Never run npm run build:assets (destroys this system)
 *   ✗  Never hardcode a colour hex anywhere outside :root
 *
 * Deploy: node automation/_deploy-css-only.mjs
 * Docs:   docs/CSS-ARCHITECTURE.md  |  docs/STYLE-GUIDE.md
 */

/* ══════════════════════════════════════════════════════════════════
   1. DESIGN TOKENS
   Every value defined once, referenced everywhere via var().
   ══════════════════════════════════════════════════════════════════ */

:root {

  /* ── Colors ─────────────────────────────────────────────────────
     Use semantic variable names everywhere. Never add a raw hex
     anywhere other than this :root block. */
  --color-brand:         #065389;   /* primary brand blue */
  --color-brand-mid:     #004674;   /* mid blue — hover states, CTA fills */
  --color-brand-dark:    #003a64;   /* dark blue — deep hover states */
  --color-brand-deep:    #00357f;   /* deep navy — hero backgrounds */
  --color-brand-bright:  #317ee5;   /* bright blue — highlights, badges */
  --color-accent:        #0099dc;   /* cyan accent */
  --color-white:         #ffffff;
  --color-text:          #1c1c1c;   /* primary body text */
  --color-text-muted:    #434753;   /* secondary / muted text */
  --color-muted:         #434753;   /* alias of --color-text-muted */
  --color-border:        #e2e8f0;   /* default border colour */
  --color-bg-page:       #ffffff;   /* page background */
  --color-bg-section:    #ffffff;   /* default section background */
  --color-bg-soft:       #fafafe;   /* subtle card / section fill */
  --color-bg-light:      #f6f9fc;   /* alternate light section */
  --color-bg-hero:       #00357f;   /* default dark hero background */
  --color-bg-white:      #ffffff;   /* explicit white alias */

  /* ── Section system ─────────────────────────────────────────────
     Change --section-spacing → ALL standard sections update. */
  --section-spacing:         48px;
  --section-spacing-sm:      32px;
  --section-spacing-lg:      72px;
  --section-spacing-hero:    clamp(2rem, 4vw, 3rem);
  --section-padding-inline:  1.5rem;
  --section-bg-default:      var(--color-bg-section);
  --section-bg-soft:         var(--color-bg-soft);

  /* ── Container system ───────────────────────────────────────────*/
  --container-max-width:       72rem;    /* 1152px */
  --container-narrow-width:    48rem;    /* 768px  */
  --container-padding-inline:  1.5rem;
  /* back-compat aliases */
  --container-max:     72rem;
  --container-narrow:  48rem;
  --container-padding: 1rem;

  /* ── Typography ─────────────────────────────────────────────────
     Change one variable → that heading size updates sitewide. */
  --font-h1:             33px;
  --font-h2:             clamp(1.65rem, 3.5vw, 2.25rem);
  --font-h3:             20px;
  --font-h4:             18px;
  --font-lead:           17px;
  --font-body:           17px;
  --font-small:          14px;
  --font-eyebrow:        13px;
  --font-card-title:     20px;   /* alias → prefer --card-title-size */
  --font-card-body:      17px;   /* alias → prefer --card-body-size */
  --line-height-heading: 1.3;
  --line-height-body:    1.65;
  --line-height-lead:    1.65;
  --line-height-h1:      1.3;    /* back-compat */
  --line-height-h2:      1.2;    /* back-compat */

  /* ── Card system ────────────────────────────────────────────────
     Source of truth: Business Communication page card design.
     Change one token → every standard card updates sitewide.    */
  --card-bg:           var(--color-white);
  --card-bg-soft:      var(--color-bg-soft);
  --card-border:       1px solid rgba(17,86,150,0.1);
  --card-radius:       20px;
  --card-radius-lg:    20px;      /* alias — kept for back-compat */
  --card-padding:      2.5rem 2rem;
  --card-padding-lg:   2.5rem;
  --card-shadow:       var(--shadow-soft);
  --card-title-color:  var(--color-brand);
  --card-title-size:   var(--font-h3);
  --card-body-size:    var(--font-body);
  --card-text-align:   left;
  --card-grid-gap:     2rem;

  /* ── Button system ──────────────────────────────────────────────
     Change --btn-radius → ALL buttons update (pill or square). */
  --btn-radius:           44px;
  --btn-padding:          15px 30px;
  --btn-font-size:        16px;
  --btn-font-weight:      500;
  --btn-primary-bg:       var(--color-brand);
  --btn-primary-text:     var(--color-white);
  --btn-secondary-bg:     transparent;
  --btn-secondary-text:   var(--color-brand);
  --btn-secondary-border: 2px solid var(--color-brand);
  --btn-hero-bg:          var(--color-white);
  --btn-hero-text:        var(--color-brand-mid);
  --btn-hero-hover-bg:    #eef2f6;

  /* ── Grid / layout ──────────────────────────────────────────────*/
  --grid-gap:            2rem;     /* 32px — standard gap */
  --grid-gap-sm:         1rem;     /* 16px — tight */
  --grid-gap-lg:         2.5rem;   /* 40px — wide */
  --hero-gap:            0px;
  --hero-h1-margin:      0 auto 20px;
  --hero-lead-margin:    0 auto 20px;
  --hero-lead-max-width: 700px;

  /* ── Border radius scale ────────────────────────────────────────*/
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-xl:   50px;      /* pill panels */
  --radius-pill: 100px;

  /* ── Shadow scale ───────────────────────────────────────────────*/
  --shadow-none: none;
  --shadow-soft: 0 2px 16px rgba(6, 20, 40, 0.06);
  --shadow-md:   0 4px 24px rgba(6, 20, 40, 0.10);
  --shadow-lg:   0 8px 40px rgba(6, 20, 40, 0.14);

  /* ── Spacing scale ──────────────────────────────────────────────*/
  --space-xs:   0.25rem;   /*  4px */
  --space-sm:   0.5rem;    /*  8px */
  --space-md:   1rem;      /* 16px */
  --space-lg:   1.5rem;    /* 24px */
  --space-xl:   2.5rem;    /* 40px */
  --space-2xl:  3rem;      /* 48px */
  --space-3xl:  4.5rem;    /* 72px */

  /* ── Transitions ────────────────────────────────────────────────*/
  --transition:      0.2s ease;
  --transition-slow: 0.35s ease;

  /* ── Legacy axion-space aliases ─────────────────────────────────
     Keep these in sync so existing site.css rules that use
     var(--axion-space-*) automatically reflect scale changes. */
  --axion-space-1: var(--space-xs);
  --axion-space-2: var(--space-sm);
  --axion-space-3: var(--space-md);
  --axion-space-4: var(--space-lg);
  --axion-space-5: var(--space-xl);
  --axion-space-6: var(--space-2xl);
  --axion-space-7: var(--space-3xl);
  --axion-radius:    var(--radius-md);   /* 12px — kept for non-card UI */
  --axion-radius-sm: var(--radius-sm);
  --axion-radius-lg: var(--radius-lg);
  --axion-shadow:    var(--shadow-none);
  --axion-shadow-sm: var(--shadow-none);
}


/* ══════════════════════════════════════════════════════════════════
   2. GLOBAL COMPONENT OVERRIDES
   These rules win via cascade (this file loads after site.css).
   They reference variables — changing a token in :root above
   auto-updates every page using that component. No per-page edits.
   ══════════════════════════════════════════════════════════════════ */

/* ── Section spacing — ALL inner pages ──────────────────────────
   Overrides the site.css rule that uses var(--axion-space-6).
   Now controlled by --section-spacing for semantic clarity.     */
.axion-apf-clean .axion-section {
  padding-block: var(--section-spacing);
}

/* ── Lead text — ALL inner pages ────────────────────────────────*/
.axion-apf-clean .axion-lead,
.axion-inner-page .axion-lead {
  font-size:   var(--font-lead) !important;
  line-height: var(--line-height-lead);
}

/* ══════════════════════════════════════════════════════════════════
   GLOBAL CARD SYSTEM
   Every standard feature / benefit / service / industry card on the
   site inherits these values. Source of truth: BC page card design.

   True exceptions (testimonials, dark-bg panels, blog posts) keep
   their own higher-specificity rules in the site.css appended block.

   When adding a new page: append its card class to this list.
   ══════════════════════════════════════════════════════════════════ */
.axion-apf-clean .axion-card,
.axion-inner-page .axion-card,
/* Real Estate / industry / solution pages */
.axion-apf-clean .axion-sol-feature-card,
/* Business Phone System */
.axion-apf-clean .axion-bps-benefit-card,
.axion-apf-clean .axion-bps-feature-card,
/* Team Chat */
.axion-apf-clean .axion-tc-collab-card,
.axion-apf-clean .axion-tc-device-block,
.axion-apf-clean .axion-tc-key-card,
.axion-apf-clean .axion-tc-benefit-card,
.axion-apf-clean .axion-tc-feature-card,
/* AI Analysis / Integration */
.axion-apf-clean .axion-aia-value-card,
.axion-apf-clean .axion-aia-advanced-card,
.axion-apf-clean .axion-aia-clarity-card,
/* Business SMS Solution */
.axion-apf-clean .axion-bss-feature-card,
.axion-apf-clean .axion-bss-use-card,
/* File Transfer */
.axion-apf-clean .axion-ft-collab-card,
.axion-apf-clean .axion-ft-feature-card,
/* Reporting */
.axion-apf-clean .axion-rpt-advanced-card,
.axion-apf-clean .axion-rpt-tool-card,
/* Meeting Solutions */
.axion-apf-clean .axion-ms-sched-card,
/* VFax */
.axion-apf-clean .axion-vfax-industry-card,
/* Fax / File Upload */
.axion-apf-clean .axion-fu-card,
/* News / Blog teasers */
.axion-apf-clean .axion-news-card,
/* Downloads */
.axion-apf-clean .axion-dl-card,
.axion-apf-clean .axion-dl-pdf-card,
/* Unified Communications */
.axion-apf-clean .axion-uc-benefit-card,
.axion-apf-clean .axion-uc-feature-card {
  background:    var(--card-bg);
  border:        var(--card-border);
  box-shadow:    var(--card-shadow);
  border-radius: var(--card-radius);
  padding:       var(--card-padding);
}

/* ── Card title — global colour + size ──────────────────────────*/
.axion-apf-clean .axion-card .axion-card__title,
.axion-apf-clean .axion-sol-feature-card .axion-card__title,
.axion-apf-clean .axion-bps-benefit-card .axion-card__title,
.axion-apf-clean .axion-bps-feature-card .axion-card__title,
.axion-apf-clean .axion-tc-collab-card .axion-card__title,
.axion-apf-clean .axion-tc-device-block .axion-card__title,
.axion-apf-clean .axion-tc-key-card .axion-card__title,
.axion-apf-clean .axion-aia-value-card .axion-card__title,
.axion-apf-clean .axion-aia-advanced-card .axion-card__title,
.axion-apf-clean .axion-aia-clarity-card .axion-card__title,
.axion-apf-clean .axion-bss-feature-card .axion-card__title,
.axion-apf-clean .axion-bss-use-card .axion-card__title,
.axion-apf-clean .axion-ft-collab-card .axion-card__title,
.axion-apf-clean .axion-ft-feature-card .axion-card__title,
.axion-apf-clean .axion-rpt-advanced-card .axion-card__title,
.axion-apf-clean .axion-rpt-tool-card .axion-card__title,
.axion-apf-clean .axion-ms-sched-card .axion-card__title,
.axion-apf-clean .axion-vfax-industry-card .axion-card__title,
.axion-apf-clean .axion-fu-card .axion-card__title,
.axion-apf-clean .axion-news-card .axion-card__title {
  color:       var(--card-title-color) !important;
  font-size:   var(--card-title-size);
  font-weight: 600;
}

/* ── Hero flex gap — ALL inner page heroes ───────────────────────
   Removes the 40px gap that .axion-hero gets from the global
   flex rule. Controlled by --hero-gap (default: 0px).           */
.axion-apf-clean .axion-section--hero .axion-hero {
  gap: var(--hero-gap) !important;
}

/* ── Hero H1 margin ─────────────────────────────────────────────*/
.axion-apf-clean .axion-section--hero:not(.axion-pulse-hero) h1 {
  margin-bottom: 20px !important;
}

/* ── Hero buttons — ALL inner page dark heroes ──────────────────
   White pill on dark background, brand text. Fixes the CTA
   inversion issue across all 20+ pages without page patches.    */
.axion-apf-clean .axion-section--hero .axion-btn--primary {
  background:    var(--btn-hero-bg)   !important;
  color:         var(--btn-hero-text) !important;
  border-color:  var(--btn-hero-bg)   !important;
  border-radius: var(--btn-radius);
  padding:       var(--btn-padding);
  font-size:     var(--btn-font-size);
  font-weight:   var(--btn-font-weight);
}
.axion-apf-clean .axion-section--hero .axion-btn--primary:hover,
.axion-apf-clean .axion-section--hero .axion-btn--primary:focus-visible {
  background:   var(--btn-hero-hover-bg) !important;
  border-color: var(--btn-hero-hover-bg) !important;
  color:        var(--btn-hero-text)     !important;
}


/* ══════════════════════════════════════════════════════════════════
   3. REUSABLE axion- CLASSES
   Use these on all new pages and sections.
   ALL new reusable classes MUST use the axion- prefix.
   Never add inline styles or page CSS when a class covers it.
   ══════════════════════════════════════════════════════════════════ */

/* ── Section spacing ─────────────────────────────────────────────*/
.axion-section-std  { padding-block: var(--section-spacing); }
.axion-section--sm,
.axion-section-sm   { padding-block: var(--section-spacing-sm); }
.axion-section--lg,
.axion-section-lg   { padding-block: var(--section-spacing-lg); }
.axion-section--compact { padding-block: var(--section-spacing-sm); }

/* ── Section backgrounds ─────────────────────────────────────────*/
.axion-section--soft  { background: var(--section-bg-soft); }
.axion-section--white { background: var(--color-white); }

/* ── Container variants ──────────────────────────────────────────*/
.axion-container--narrow { max-width: var(--container-narrow-width) !important; }
.axion-container--wide   { max-width: 90rem !important; }

/* ── Typography utilities ────────────────────────────────────────*/
.axion-heading-xl { font-size: var(--font-h1); line-height: var(--line-height-heading); font-weight: 700; }
.axion-heading-lg { font-size: var(--font-h2); line-height: var(--line-height-heading); font-weight: 700; }
.axion-heading-md { font-size: var(--font-h3); line-height: var(--line-height-heading); font-weight: 600; }
.axion-heading-sm { font-size: var(--font-h4); line-height: var(--line-height-heading); font-weight: 600; }
.axion-text        { font-size: var(--font-body); line-height: var(--line-height-body); color: var(--color-text); }
.axion-text--muted { color: var(--color-text-muted); }
.axion-text--small { font-size: var(--font-small); }
.axion-eyebrow {
  font-size:      var(--font-eyebrow);
  font-weight:    700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color:          var(--color-brand);
}

/* ── Card utilities (for standalone use) ─────────────────────────*/
.axion-card-clean {
  background:    var(--card-bg);
  border:        var(--card-border);
  border-radius: var(--card-radius);
  box-shadow:    var(--card-shadow);
  padding:       var(--card-padding);
}
.axion-card-clean--lg { padding: var(--card-padding-lg); }
.axion-card-soft  { background: var(--card-bg-soft); }
.axion-card-white { background: var(--color-white); }

/* ── Card modifier classes ───────────────────────────────────────
   Add to any card element to override one default intentionally.
   Example: <div class="axion-sol-feature-card axion-card--bordered">
   Prefer these over page-specific CSS patches.                   */
.axion-card--white    { background:  var(--color-white)    !important; }
.axion-card--soft     { background:  var(--card-bg-soft)   !important; }
.axion-card--bordered { border:      1px solid var(--color-border) !important; }
.axion-card--shadow   { box-shadow:  var(--shadow-soft)    !important; }
.axion-card--left     { text-align:  left                  !important; }
.axion-card--center   { text-align:  center                !important; }
.axion-card--compact  { padding:     1.5rem                !important; }
.axion-card--lg       { padding:     var(--card-padding-lg) !important; }

/* ── Grid utilities ──────────────────────────────────────────────*/
.axion-grid--2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--grid-gap);
}
.axion-grid--3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--grid-gap);
}
.axion-grid--4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--grid-gap);
}
.axion-grid--cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--card-grid-gap);
}
@media (max-width: 900px) {
  .axion-grid--3,
  .axion-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .axion-grid--2,
  .axion-grid--3,
  .axion-grid--4 { grid-template-columns: 1fr; }
}

/* ── Button utilities ────────────────────────────────────────────*/
.axion-btn-pill { border-radius: var(--btn-radius) !important; }

/* Light/white button — for use on dark section backgrounds */
.axion-btn--light {
  background:    var(--btn-hero-bg)   !important;
  color:         var(--btn-hero-text) !important;
  border-color:  var(--btn-hero-bg)   !important;
  border-radius: var(--btn-radius);
}
.axion-btn--light:hover,
.axion-btn--light:focus-visible {
  background:   var(--btn-hero-hover-bg) !important;
  border-color: var(--btn-hero-hover-bg) !important;
  color:        var(--btn-hero-text)     !important;
}