/* ============================================================================
   This Waay — tokens.css  (v0 draft · faithful refactor from theme.min.css)
   Every value is copied verbatim from the production CSS. No approximations.
   Canonical home will be Branding/product-design-studio/ once verified.
   Fonts self-hosted from /assets/fonts (the real woff2 already shipped there).
   ============================================================================ */

@font-face{font-family:'AxiformaRegular';  src:url('/assets/fonts/AxiformaRegular.woff2')  format('woff2');font-weight:normal;font-style:normal;font-display:swap}
@font-face{font-family:'AxiformaMedium';   src:url('/assets/fonts/AxiformaMedium.woff2')   format('woff2');font-weight:normal;font-style:normal;font-display:swap}
@font-face{font-family:'AxiformaSemiBold'; src:url('/assets/fonts/AxiformaSemiBold.woff2') format('woff2');font-weight:normal;font-style:normal;font-display:swap}
@font-face{font-family:'AxiformaBold';     src:url('/assets/fonts/AxiformaBold.woff2')     format('woff2');font-weight:normal;font-style:normal;font-display:swap}
@font-face{font-family:'AxiformaExtraBold';src:url('/assets/fonts/AxiformaExtraBold.woff2')format('woff2');font-weight:normal;font-style:normal;font-display:swap}

:root{
  /* ---- Color (real palette) ---- */
  --tw-navy:            #0c2a48;   /* body text · hero/section grounds · card titles */
  --tw-navy-deep:       #05203a;   /* footer / deepest surface */
  --tw-green:           #54b987;   /* THE brand green — buttons, eyebrows, accents */
  --tw-green-punch:     #3dd68c;   /* one moment per page */
  --tw-teal:            #0babab;   /* secondary — heritage */
  --tw-steel:           #0d698a;   /* secondary — support/charts */
  --tw-coral:           #f2a08d;   /* illustration ONLY */
  --tw-white:           #ffffff;
  /* Known WP typo of the green — do NOT propagate: #54b886 (buttons/explore) → use --tw-green */

  /* ---- Text ramps ---- */
  --tw-text-body:       #000000;                 /* bare <p> in theme */
  --tw-text-navy:       #0c2a48;                 /* body element color */
  --tw-text-muted:      rgba(12,42,72,0.65);     /* muted copy on light */
  --tw-text-on-navy:    rgba(255,255,255,0.85);  /* copy on navy */
  --tw-text-on-navy-meta:rgba(255,255,255,0.6);  /* de-emphasized on navy */

  /* ---- Grounds / gradients (verbatim) ---- */
  --tw-soft:   linear-gradient(135deg, #e8fefb 0, #f2fbfb 55%, #fdf5e8 100%);              /* we-serve / testimonial / cards */
  --tw-soft-4: linear-gradient(135deg, #f5f7ec 0, #eafdfa 20%, #f2fbfb 80%, #f8f7f0 100%);/* why-us panel */
  --tw-grad-green: linear-gradient(135deg, #54b987 0, #3dd68c 100%);

  /* ---- Type ---- */
  --tw-font-regular:  'AxiformaRegular','Poppins','Segoe UI',sans-serif;
  --tw-font-medium:   'AxiformaMedium','Poppins','Segoe UI',sans-serif;
  --tw-font-semibold: 'AxiformaSemiBold','Poppins','Segoe UI',sans-serif;
  --tw-font-bold:     'AxiformaBold','Poppins','Segoe UI',sans-serif;
  --tw-font-extrabold:'AxiformaExtraBold','Poppins','Segoe UI',sans-serif;
  --tw-body-size:     15px;   /* body{font-size:15px} */
  --tw-eyebrow-size:  12px;   /* h6 */
  --tw-eyebrow-track: 2.76px; /* h6 letter-spacing */

  /* ---- Measure (max line length) ----
     Running text is capped so lines stay in the comfortable 45–75 character
     band. Headings get a much shorter measure so they break on meaning rather
     than at the container edge — this is what prevents widows on display type. */
  --tw-measure:       68ch;   /* body copy — the default for running text */
  --tw-measure-tight: 46ch;   /* lede / intro / card copy — shorter, denser */
  --tw-measure-head:  22ch;   /* display headlines (H1 / large H2) */

  /* ---- Shape & rhythm ---- */
  --tw-radius-card:  8px;    /* every .box */
  --tw-radius-pill:  25px;   /* .c-btn */
  --tw-radius-track: 14px;   /* .tw-track exception */
  --tw-radius-input: 2px;    /* form fields */
  --tw-shadow-card:  0 10px 30px rgba(12,42,72,0.10);
  --tw-container:    1140px; /* bootstrap xl container the site uses */
  --tw-card-gap:     30px;

  /* ---- Skew motif (verbatim angles) ---- */
  --tw-skew-section: -2deg;  /* section breaks / heroes */
  --tw-skew-pricing: -3deg;
  --tw-skew-contact: -5deg;
  --tw-skew-price:   -6deg;  /* price tag */
  --tw-skew-card:    -10deg; /* card panels */
}