/* ============================================================
   ZESTEREX.PRO — DESIGN TOKENS (v1 DRAFT — pending Jamil approval)
   Brand: ZES·TER·EX — teal + charcoal, clean professional B2B firm.
   Colors sampled from the live logo (teal #006080, near-black wordmark).
   Deliberately distinct from the getX "report-document" aesthetic:
   corporate, generous whitespace, card-based, softer radii.
   Fonts: Inter (UI/headings) + IBM Plex Mono (technical labels/tags).
   ============================================================ */
:root{
  /* ---- Brand ---- */
  --teal:        #006080;   /* primary brand — links, primary CTA, icon accents */
  --teal-dark:   #004C66;   /* hover / pressed */
  --teal-deep:   #003A4E;   /* deep sections / footer */
  --teal-tint:   #E7F0F3;   /* pale panels, badges */
  --teal-tint-2: #F3F8F9;   /* very light section bg */

  /* ---- Ink / neutrals ---- */
  --ink:         #101822;   /* headings, wordmark-dark */
  --ink-soft:    #33404D;   /* strong body */
  --ink-body:    #475467;   /* body text */
  --ink-mute:    #667085;   /* captions, mono labels */
  --line:        #E4E9ED;   /* hairline rules, card borders */
  --line-strong: #D0D8DE;
  --paper:       #FFFFFF;
  --paper-2:     #F8FAFB;   /* light section / card bg */
  --canvas:      #EEF2F4;   /* page backdrop */

  /* ---- Accents (sparing) ---- */
  --gold:        #C9992B;   /* awards / highlight accents only */
  --ok:          #157F53;   /* "passes"/success ticks */

  /* ---- Typography ---- */
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

  --h1-size:52px;   --h1-size-m:32px; --h1-lh:1.08;  --h1-ls:-1px;
  --h2-size:32px;   --h2-size-m:24px; --h2-lh:1.15;  --h2-ls:-0.5px;
  --h3-size:20px;   --h3-lh:1.25;
  --body-size:17px; --body-lh:1.65;
  --eyebrow-size:13px; --eyebrow-ls:1.6px;
  --tag-size:11.5px;   --tag-ls:0.8px;

  /* ---- Layout ---- */
  --page-max:1200px;
  --radius:8px;             /* cards, buttons — softer than getX's 3px */
  --radius-sm:6px;
  --radius-lg:14px;
  --rule:1px;

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

  /* ---- Elevation ---- */
  --shadow-sm:0 1px 2px rgba(16,24,34,.06);
  --shadow-card:0 1px 3px rgba(16,24,34,.06), 0 12px 28px rgba(16,24,34,.06);
  --shadow-lg:0 20px 50px rgba(16,24,34,.12);
  --shadow-lift:0 14px 34px rgba(16,24,34,.11);   /* card hover lift (build-kit) */

  /* ---- Motion (build-kit: ONE easing, TWO durations) ---- */
  --ease:cubic-bezier(0.22, 1, 0.36, 1);
  --dur-reveal:0.6s;
  --dur-hover:0.2s;
}