/*
 * 5UWebsite.com — Design Tokens
 * Source of truth: legacy site helix3 custom CSS + 4 representative pages.
 * IMMUTABLE for Phase C — sibling template agents must NOT modify these.
 *
 * Token order:
 *   1. Brand colors
 *   2. Neutral / text colors
 *   3. Backgrounds
 *   4. Typography (font families + scale)
 *   5. Spacing scale
 *   6. Layout (container widths + breakpoints — also exposed as @custom-media-like comments)
 *   7. Effects (radius, shadows, transitions)
 */

:root {
  /* ===== Brand colors ===== */
  --color-brand: #236ce2;            /* primary blue — links, buttons, accents */
  --color-brand-hover: #1253bb;       /* link hover, deeper blue */
  --color-brand-active: #1f60c5;      /* button :hover bg (legacy uses !important) */
  --color-brand-rgb: 35, 108, 226;    /* rgba() use, e.g. rgba(35,108,226,.8) */
  --color-brand-pale: #f4f7fe;        /* pale-blue tint used in banner overlays */
  --color-brand-pale-rgba: rgba(244, 247, 254, 0.8);

  /* ===== Neutral / text colors ===== */
  --color-text: #000;                 /* body, h1-h4 default */
  --color-text-soft: #333;            /* offcanvas-menu, content */
  --color-text-muted: #5f6f7d;        /* sp-module list items */
  --color-text-faint: #666d70;        /* faq intro paragraphs */
  --color-text-paginate: #838d8f;     /* article pagination labels */
  --color-text-darkest: #141414;      /* megamenu dropdown items */
  --color-text-blog-h2: #262626;      /* blog category titles */

  /* ===== Backgrounds ===== */
  --color-bg-page: #fff;
  --color-bg-header: rgba(255, 255, 255, 1);
  --color-bg-footer: #fff;
  --color-bg-cta-blue: #236ce2;       /* CTA "Get a 5U Consultation" band */

  /* ===== Borders / lines ===== */
  --color-border-subtle: #eee;        /* breadcrumb bottom border */
  --color-border-strong: rgba(155, 155, 155, 0.5);   /* header bottom shadow tint */

  /* ===== Typography ===== */
  /* Font stacks — when self-hosted woff2 are placed at /fonts/ they win.
     System fallbacks keep the page legible at smoke-test stage. */
  --font-sans: "Noto Sans SC", "Noto Sans TC", "Noto Sans", "Montserrat",
    -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft Yahei", sans-serif;
  --font-display: "Montserrat", "Noto Sans SC", "Noto Sans TC", "Noto Sans",
    -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Type scale (desktop) */
  --fs-h1: 42px;       --lh-h1: 70px;    --fw-h1: 700;
  --fs-h2: 32px;       --lh-h2: 46px;    --fw-h2: 500;
  --fs-h3: 24px;       --lh-h3: 32px;    --fw-h3: 500;
  --fs-h4: 18px;       --lh-h4: 28px;    --fw-h4: 500;
  --fs-body: 16px;     --lh-body: 32px;  --fw-body: 400;
  --fs-lead: 18px;     --lh-lead: 30px;  --fw-lead: 400; /* lede paragraphs */
  --fs-small: 14px;    --lh-small: 22px; --fw-small: 400;
  --fs-cta-h2: 34px;   --lh-cta-h2: 54px;                /* white CTA headline */
  --fs-cta-line: 22px; --lh-cta-line: 50px;              /* CTA buttons + phone label */
  --fs-nav: 16px;      --lh-nav: 24px;   --fw-nav: 500;
  --fs-page-h1: 50px;                                     /* portfolio banner h1 max */

  /* Type scale (mobile <=767px) — based on legacy media-query in helix3 CSS */
  --fs-h1-m: 31px;     --lh-h1-m: 52px;
  --fs-h2-m: 26px;     --lh-h2-m: 44px;
  --fs-h3-m: 20px;     --lh-h3-m: 28px;
  --fs-block-title-m: 31px; --lh-block-title-m: 44px;

  /* ===== Spacing scale ===== */
  /* Section padding (legacy SPPB defaults: 60/80/100). Keep these consistent
     so sibling agents don't reinvent values. */
  --space-section-y: 100px;           /* heroic sections */
  --space-section-y-md: 80px;
  --space-section-y-sm: 60px;         /* CTA band uses 60px top/bottom */
  --space-section-y-xs: 36px;         /* mobile CTA */
  --space-section-y-mobile: 30px;     /* generic mobile section */
  --space-page-body: 50px;            /* #sp-main-body padding */

  /* Element-level spacing */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 40px;
  --space-2xl: 60px;

  --space-h1-bottom: 60px;
  --space-h2-bottom: 40px;
  --space-h3-bottom: 40px;

  /* ===== Layout ===== */
  --container: 1170px;                /* legacy default container */
  --container-wide: 1320px;           /* >=1400 viewport (sppb-row-container override) */
  --container-narrow: 960px;
  --gutter: 16px;

  /* ===== Header dimensions ===== */
  --h-topbar: 62px;             /* legacy top-bar: 18px top padding + 30px content + 14px bottom */
  --h-header: 97px;             /* legacy main bar: 97px (legacy CSS body.header-default #sp-header) */
  --h-header-fixed: 70px;       /* shrunk fixed-state */
  --h-logo-max: 74px;

  /* ===== Effects ===== */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-pill: 19px;                /* nav button radius */
  --radius-pill-lg: 25px;             /* CTA button radius */
  --radius-pill-xl: 50px;             /* form submit button radius */
  --shadow-header: 0 2px 4px 0 rgba(155, 155, 155, 0.5);
  --shadow-card: 0 4px 16px rgba(0, 0, 0, 0.08);

  --transition-fast: 0.2s ease;
  --transition-med: 0.3s ease;
  --transition-slow: 0.5s ease;

  /* ===== Z-index ===== */
  --z-content: 1;
  --z-header: 100;
  --z-offcanvas: 200;
  --z-modal: 1000;
}

/* ===== Breakpoints (documentation only — CSS uses literal values) =====
   Legacy site uses Bootstrap-3-ish breakpoints, surfaced consistently:
     xs:  <576px   (small phones)
     sm:  <768px   (large phones / phablet) - main mobile cutoff for typography
     md:  <992px   (tablet / small laptop)  - menu toggles to off-canvas
     lg:  <1200px  (laptop)                  - SPPB container shrinks
     xl:  >=1200px (desktop)
     xxl: >=1400px (extra-wide)              - container 1320

   Every CSS file in this build uses raw min-width / max-width queries —
   no preprocessor, no @custom-media. Stay consistent: 575.98 / 767.98 / 991.98 / 1199.98.
*/