/* ===========================================================
   NexGen AIvolution: Design Tokens
   Approved by Armin D. Willis, 2026-08-15.

   Sources:
     Colors and fonts  -> Brand Book v1.0 (94-100), Design System v2.0
     Radius 14px       -> Brand Book 102
     Everything marked NEW has no source document and was
     approved directly by Dre'. The Brand Book, Design System,
     Voice Guide, Execution System, and brand skill references
     were all checked: none contains a spacing scale or a web
     type scale.

   Install: /tokens/nexgen-tokens.css, enqueued by the Hello
   Elementor CHILD theme. Never the parent theme.
   =========================================================== */

:root {

  /* ---- STRUCTURAL ------------------------------------ */
  --ink:        #07101E;   /* page base */
  --midnight:   #0B1520;   /* primary section background */
  --deep:       #101C2C;   /* alternating section bg, card base */
  --surface:    #152033;   /* raised cards, panels, hover */
  --border:     #1C2E44;   /* primary separator, card border */
  --bsoft:      #152236;   /* subtle separator, inner divider */

  /* ---- TEXT ------------------------------------------ */
  --text:       #F0F2FA;   /* headings and body */
  --secondary:  #8A9BB8;   /* secondary copy, ALL labels,
                              metadata, eyebrows, captions */
  --muted:      #526070;   /* DECORATIVE ONLY. Never text.
                              Fails contrast on all four
                              backgrounds at every size. */

  /* ---- ACCENT ---------------------------------------- */
  --gold:       #C8881A;
  --teal:       #3BBFA0;
  --elec:       #4A8DE6;
  --purp:       #8B6FD4;
  --sage:       #5FC49A;
  --risk:       #E86A5A;

  /* ---- ACCENT TINTS (faint fills) -------------------- */
  --gdim:       rgba(200,136,26,.14);
  --tdim:       rgba(59,191,160,.14);
  --edim:       rgba(74,141,230,.14);
  --pdim:       rgba(139,111,212,.14);
  --sdim:       rgba(95,196,154,.14);   /* NEW: was missing */
  --rdim:       rgba(232,106,90,.14);   /* NEW: was missing */
  --gline:      rgba(200,136,26,.35);   /* gold hairline */
  --tline:      rgba(59,191,160,.32);   /* teal hairline */

  /* ---- METHOD PHASES --------------------------------- */
  --p1: #4A8DE6;   /* Assess    */
  --p2: #3BBFA0;   /* Design    */
  --p3: #8B6FD4;   /* Prepare   */
  --p4: #C8881A;   /* Implement */
  --p5: #5FC49A;   /* Optimize  */

  /* ---- FONT FAMILIES --------------------------------- */
  --font-display: 'Outfit', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;
  --font-heading: 'IBM Plex Sans', system-ui, sans-serif;

  /* ---- TYPE SCALE (NEW) ------------------------------ */
  --fs-display:   clamp(40px, 5.2vw, 76px);
  --fs-h1:        clamp(34px, 4vw,   52px);
  --fs-h2:        clamp(28px, 3vw,   40px);
  --fs-h3:        clamp(22px, 2.2vw, 28px);
  --fs-h4:        20px;
  --fs-h5:        17px;
  --fs-h6:        15px;
  --fs-stat:      clamp(36px, 4vw,   52px);
  --fs-nav:       18px;  /* 18px per Dre'. At 16px the nav read smaller than everything around it. */
  --fs-btn:       16px;
  --fs-btn-sm:    14px;

  --fs-lede:      clamp(18px, 1.5vw, 21px);
  --fs-body:      17px;
  --fs-body-sm:   15px;
  --fs-caption:   13px;
  --fs-quote:     20px;
  --fs-table:     15px;

  --fs-eyebrow:   11px;
  --fs-badge:     11px;
  --fs-statlbl:   11px;
  --fs-thead:     11px;
  --fs-meta:      12px;
  --fs-code:      13px;

  /* ---- LINE HEIGHT (NEW) ----------------------------- */
  --lh-display: 1.04;
  --lh-h1:      1.10;
  --lh-h2:      1.15;
  --lh-h3:      1.25;
  --lh-h4:      1.30;
  --lh-h5:      1.35;
  --lh-h6:      1.40;
  --lh-stat:    1.00;
  --lh-lede:    1.55;
  --lh-body:    1.65;
  --lh-body-sm: 1.60;
  --lh-caption: 1.50;
  --lh-quote:   1.55;
  --lh-table:   1.50;
  --lh-ui:      1.00;

  /* ---- LETTER SPACING (NEW) -------------------------- */
  --tr-display: -.03em;
  --tr-h1:      -.025em;
  --tr-h2:      -.02em;
  --tr-h3:      -.015em;
  --tr-h4:      -.01em;
  --tr-h5:      -.005em;
  --tr-h6:      0;
  --tr-stat:    -.02em;
  --tr-ui:      .01em;
  --tr-eyebrow: .40em;
  --tr-badge:   .12em;
  --tr-label:   .16em;
  --tr-meta:    .04em;
  --tr-code:    .02em;

  /* ---- FONT WEIGHT ----------------------------------- */
  --fw-display: 700; /* IBM Plex Sans max weight */
  --fw-h1:      700; /* IBM Plex Sans max weight */
  --fw-h2:      700;
  --fw-h3:      700;
  --fw-h4:      700;
  --fw-h5:      600;
  --fw-h6:      600;
  --fw-ui:      600;
  --fw-body:    400;
  --fw-emph:    600;
  --fw-label:   600;

  /* ---- SPACING SCALE (NEW) --------------------------- */
  --s-1:    4px;
  --s-2:    8px;
  --s-3:   12px;
  --s-4:   16px;
  --s-5:   24px;
  --s-6:   32px;
  --s-7:   48px;
  --s-8:   64px;
  --s-9:   96px;
  --s-10: 128px;

  /* ---- SECTION GAPS (NEW) ---------------------------- */
  --sec-gap: 80px;          /* mobile default */

  /* ---- CONTAINERS (NEW) ------------------------------ */
  --w-prose:  720px;
  --w-main:  1200px;
  --w-wide:  1440px;
  --gutter:    20px;        /* mobile default */

  /* ---- GRID (NEW) ------------------------------------ */
  --grid-cols: 4;           /* mobile default */
  --grid-gap: 24px;

  /* ---- COMPONENT PADDING (NEW) ----------------------- */
  --pad-card:    24px;      /* mobile default */
  --pad-btn-y:   14px;
  --pad-btn-x:   28px;

  /* ---- RADIUS ---------------------------------------- */
  --r:      14px;           /* cards, components. Brand Book locked */
  --r-btn:   8px;           /* NEW */
  --r-pill:  4px;           /* NEW */
}

/* ---- RESPONSIVE STEPS -------------------------------- */
/* Breakpoints are literal because custom properties do not
   work inside media query conditions.
   mobile <768 | tablet 768-1023 | desktop 1024-1439 | wide 1440+ */

@media (min-width: 768px) {          /* tablet */
  :root {
    --sec-gap:  96px;
    --gutter:   32px;
    --grid-cols: 8;
  }
}

@media (min-width: 1024px) {         /* desktop */
  :root {
    --sec-gap: 120px;
    --gutter:   48px;
    --grid-cols: 12;
    --grid-gap: 32px;
    --pad-card: 32px;
  }
}

/* ===========================================================
   CONTRAST RULES, ENFORCED

   --muted #526070 measures 2.96 / 2.86 / 2.67 / 2.54 against
   Ink / Midnight / Deep / Surface. Body text needs 4.5, large
   text needs 3.0, interface elements need 3.0. It fails all
   three on all four. Decorative use only: faint rules,
   inactive decorative strokes, ornament. Never text.

   --purp #8B6FD4 measures 4.83 / 4.66 / 4.35 / 4.14 against
   the same four. Permitted as:
     body copy                      -> Ink and Midnight only
     headings 24px+, or 19px+ bold  -> any background
     borders, fills, icons, strokes -> any background

   All other accents clear 4.5 on all four backgrounds:
     gold 5.44-6.35   teal 7.11-8.30   elec 4.85-5.67
     sage 7.66-8.94   risk 5.16-6.03   secondary 5.80-6.77
   =========================================================== */

/* ---- BASE -------------------------------------------- */

body {
  background: var(--ink);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

/* No readable prose below 15px anywhere on the site. */