/*
 * WExAct Design Tokens
 * ────────────────────
 * All CSS custom properties are prefixed --wx- to avoid conflicts
 * with Blocksy's --theme- variables and Elementor's --e- variables.
 *
 * Source of truth: project/colors_and_type.css + project/WExAct-v4.html
 * Configured against the official WExAct VI:
 *   Primary  #0672B5  (CMYK 85/52/11/0  RGB 6/114/181)
 *   Neutral  #B3B3B3  (RGB 179/179/179)
 */

/* Google Fonts preconnect hints are added by PHP; font loading via
   wexact-google-fonts handle in functions.php. */

:root {
  /* ── Brand blue ─────────────────────────────────────── */
  --wx-brand:       #0672B5;
  --wx-brand-90:    #1B7FBC;
  --wx-brand-80:    #348DC4;
  --wx-brand-70:    #4D9BCC;
  --wx-brand-60:    #66A9D4;
  --wx-brand-50:    #82B8DA;
  --wx-brand-40:    #9CC6E1;
  --wx-brand-30:    #B6D4E9;
  --wx-brand-20:    #CDE2F0;
  --wx-brand-10:    #E6F0F8;
  --wx-brand-hover: #055E94;
  --wx-brand-press: #044977;

  /* ── Accent aliases (brand blue) ────────────────────── */
  --wx-accent:      var(--wx-brand);
  --wx-accent-hover:var(--wx-brand-hover);
  --wx-accent-soft: var(--wx-brand-30);
  --wx-accent-tint: var(--wx-brand-10);

  /* ── Neutral grey ───────────────────────────────────── */
  --wx-grey:        #B3B3B3;
  --wx-grey-80:     #C2C2C2;
  --wx-grey-60:     #D1D1D1;
  --wx-grey-40:     #E0E0E0;
  --wx-grey-20:     #EFEFEF;

  /* ── Paper (background tiers) ───────────────────────── */
  --wx-paper-0:     #FFFFFF;
  --wx-paper-1:     #F7F8FA;
  --wx-paper-2:     #EFF1F4;
  --wx-paper-3:     var(--wx-grey-40);

  /* ── Ink (text tiers) ───────────────────────────────── */
  --wx-ink-0:       #14171C;   /* headlines */
  --wx-ink-1:       #2A2F38;   /* body */
  --wx-ink-2:       #4F5560;   /* secondary text */
  --wx-ink-3:       #7A8089;   /* meta / placeholders */
  --wx-ink-4:       #B3B3B3;   /* disabled */

  /* ── Rule lines ─────────────────────────────────────── */
  --wx-line:        #E0E3E8;
  --wx-line-strong: #2A3038;

  /* ── Dark surfaces ──────────────────────────────────── */
  --wx-ink-surface:   #0E1924;   /* footer, dark CTA */
  --wx-ink-surface-2: #152437;   /* elevated dark panel */

  /* ── Semantic ───────────────────────────────────────── */
  --wx-success: #2E7D5B;
  --wx-warning: #B58A2A;
  --wx-danger:  #B23A3A;

  /* ── Typography ─────────────────────────────────────── */
  --wx-font-display: "Manrope", "Noto Sans SC", "PingFang SC", system-ui, sans-serif;
  --wx-font-sans:    "Manrope", "Noto Sans SC", "PingFang SC", "Helvetica Neue", system-ui, sans-serif;
  --wx-font-serif:   "Source Serif 4", "Noto Serif SC", "Songti SC", Georgia, serif;
  --wx-font-mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Font sizes */
  --wx-fs-eyebrow:  0.75rem;     /*  12px */
  --wx-fs-meta:     0.8125rem;   /*  13px */
  --wx-fs-body-sm:  0.9375rem;   /*  15px */
  --wx-fs-body:     1.0625rem;   /*  17px */
  --wx-fs-body-lg:  1.1875rem;   /*  19px */
  --wx-fs-lead:     1.375rem;    /*  22px */
  --wx-fs-h6:       1rem;        /*  16px */
  --wx-fs-h5:       1.25rem;     /*  20px */
  --wx-fs-h4:       1.625rem;    /*  26px */
  --wx-fs-h3:       2.125rem;    /*  34px */
  --wx-fs-h2:       2.875rem;    /*  46px */
  --wx-fs-h1:       3.75rem;     /*  60px */
  --wx-fs-display:  5rem;        /*  80px */

  /* Line heights */
  --wx-lh-tight:    1.05;
  --wx-lh-snug:     1.18;
  --wx-lh-normal:   1.45;
  --wx-lh-relax:    1.6;

  /* Letter spacing */
  --wx-ls-display:  -0.025em;
  --wx-ls-h:        -0.02em;
  --wx-ls-body:     0;
  --wx-ls-eyebrow:  0.18em;  /* handoff §4: eyebrow/footer headings +0.18em */

  /* ── Spacing scale ──────────────────────────────────── */
  --wx-s-1:  4px;
  --wx-s-2:  8px;
  --wx-s-3:  12px;
  --wx-s-4:  16px;
  --wx-s-5:  24px;
  --wx-s-6:  32px;
  --wx-s-7:  48px;
  --wx-s-8:  64px;
  --wx-s-9:  96px;
  --wx-s-10: 128px;
  --wx-s-11: 160px;

  /* ── Layout ─────────────────────────────────────────── */
  --wx-gutter:     clamp(20px, 4vw, 56px);
  --wx-col-max:    1280px;
  --wx-col-narrow: 760px;
  --wx-col-reading:640px;
  --wx-section-y:  clamp(72px, 10vw, 140px);

  /* ── Radius ─────────────────────────────────────────── */
  --wx-r-0:    0;
  --wx-r-1:    2px;
  --wx-r-2:    4px;
  --wx-r-3:    8px;
  --wx-r-pill: 999px;

  /* ── Borders ────────────────────────────────────────── */
  --wx-bw-1:    1px;
  --wx-bw-2:    2px;
  --wx-bw-thick:3px;

  /* ── Shadows ────────────────────────────────────────── */
  --wx-shadow-1: 0 1px 0 rgba(20,24,29,0.04), 0 0 0 1px var(--wx-line);
  --wx-shadow-2: 0 4px 14px rgba(20,24,29,0.06), 0 0 0 1px var(--wx-line);
  --wx-shadow-3: 0 12px 40px rgba(20,24,29,0.12);

  /* ── Motion ─────────────────────────────────────────── */
  --wx-ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --wx-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --wx-dur-fast:    140ms;
  --wx-dur-base:    240ms;
  --wx-dur-slow:    480ms;

  /* ── Z-index ────────────────────────────────────────── */
  --wx-z-nav:     50;
  --wx-z-overlay: 80;
  --wx-z-modal:   100;
}

/* ── Base resets scoped to WExAct page templates ────────── */
.wx-root {
  background:    var(--wx-paper-0);
  color:         var(--wx-ink-1);
  font-family:   var(--wx-font-sans);
  font-size:     var(--wx-fs-body);
  line-height:   var(--wx-lh-relax);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.wx-root *, .wx-root *::before, .wx-root *::after {
  box-sizing: border-box;
}
.wx-root ::selection {
  background: var(--wx-brand-20);
  color:      var(--wx-ink-0);
}

/* Inline links inside WExAct text areas */
.wx-prose a {
  color:          inherit;
  text-decoration: none;
  border-bottom:  1px solid currentColor;
  transition:
    color      var(--wx-dur-fast) var(--wx-ease-out),
    border-color var(--wx-dur-fast) var(--wx-ease-out);
}
.wx-prose a:hover {
  color:        var(--wx-accent);
  border-color: var(--wx-accent);
}