/* ==========================================================================
   TECHIE ZEST — DESIGN TOKENS
   Single source of truth: brand, type scale, spacing, motion, layout.
   WP note: maps 1:1 onto :root in the theme's style.css.
   ========================================================================== */

:root {
  /* ---- Brand palette (from the logo) --------------------------------- */
  --navy:            #0E3F86;   /* authority / trust / technology         */
  --navy-deep:       #0A2E60;   /* darker step for dark sections          */
  --navy-ink:        #071E3F;   /* near-black navy — headings / footer    */
  --emerald:         #109F66;   /* growth / action / primary CTA          */
  --emerald-deep:    #0C7E51;   /* hover / pressed                        */
  --emerald-bright:  #16B778;   /* highlights inside artwork              */
  --gold:            #CDB052;   /* premium accent — used sparingly        */
  --gold-soft:       #E4D399;   /* faint gold hairline on dark            */
  --white:           #FFFFFF;   /* PRIMARY page background                 */

  /* ---- Functional roles ---------------------------------------------- */
  --bg:              var(--white);
  --bg-invert:       var(--navy-deep);
  --surface:         #F5F7FB;   /* rare inset panel only, never sections  */

  --text:            #12233D;
  --text-soft:       #4A5A72;
  --text-faint:      #8A97A8;
  --text-invert:     #FFFFFF;
  --text-invert-soft:#B9C6DC;

  --line:            #E4E8EF;
  --line-strong:     #CBD3DF;
  --line-invert:     rgba(255,255,255,.16);

  --accent:          var(--emerald);
  --accent-ink:      var(--emerald-deep);
  --focus-ring:      #2E6BD6;

  /* ---- Type families --------------------------------------------------
     Plus Jakarta Sans is the single voice for the whole site: body + display.
     --font-display is an alias (kept so legacy .font-serif usages resolve to
     Jakarta at its heaviest optical weight). IBM Plex Mono is retained ONLY
     for micro technical labels — eyebrows, status chips, indices, metadata. */
  --font-sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system,
               "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: var(--font-sans);
  --font-serif: var(--font-sans);   /* alias → Plus Jakarta Sans display */
  --font-mono:"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---- Fluid type scale ---------------------------------------------- */
  --step--1: clamp(0.83rem, 0.80rem + 0.15vw, 0.92rem);
  --step-0:  clamp(1.00rem, 0.96rem + 0.22vw, 1.13rem);
  --step-1:  clamp(1.20rem, 1.10rem + 0.50vw, 1.44rem);
  --step-2:  clamp(1.50rem, 1.30rem + 1.00vw, 2.10rem);
  --step-3:  clamp(2.00rem, 1.60rem + 2.00vw, 3.15rem);
  --step-4:  clamp(2.60rem, 1.90rem + 3.40vw, 4.60rem);
  --step-5:  clamp(3.20rem, 2.10rem + 5.40vw, 6.50rem);

  --leading-tight:  1.04;
  --leading-snug:   1.18;
  --leading-body:   1.62;
  --tracking-tight: -0.02em;
  --tracking-flat:  -0.01em;
  --tracking-wide:  0.14em;

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semi:    600;
  --weight-bold:    700;
  --weight-x:       800;

  /* ---- Spacing (8px base) -------------------------------------------- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2rem;
  --space-xl:  3rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  /* Vertical rhythm — deliberately tightened. Premium spacing creates hierarchy
     without stretching the page: ~87px/side at 1440, ~63px at 768, ~52px on
     mobile (≈30% tighter than a stock 9rem section). One token drives every
     .section site-wide, so homepage and inner pages stay in lockstep. */
  --section-y: clamp(3.25rem, 2.2rem + 3.6vw, 6rem);

  /* ---- Layout --------------------------------------------------------- */
  --container:      1240px;
  --container-wide: 1400px;
  --gutter:         clamp(1.25rem, 0.5rem + 3vw, 3rem);
  --grid-cols:      12;

  /* Header height + logo height — overridden per breakpoint in responsive.css.
     Kept as tokens so the sticky header and the mobile-nav offset stay in sync. */
  --header-h:       108px;
  --logo-h:         96px;

  /* ---- Radius / border / elevation ----------------------------------- */
  --radius-sm: 4px;
  --radius:    8px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --border:    1px solid var(--line);

  --shadow-sm: 0 1px 2px rgba(7,30,63,.06);
  --shadow-md: 0 12px 30px -12px rgba(7,30,63,.18);
  --shadow-lg: 0 30px 60px -24px rgba(7,30,63,.28);
  --shadow-lift: 0 20px 42px -24px rgba(7,30,63,.34);

  /* ---- Motion --------------------------------------------------------- */
  --ease:      cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:  160ms;
  --dur:       280ms;
  --dur-slow:  560ms;

  --z-header: 100;
  --z-overlay: 200;
}