/* ==========================================================================
   NUii — brand design tokens
   --------------------------------------------------------------------------
   The single source of truth for NUii's visual language. Import this first on
   any new NUii page, then layer page-specific CSS on top; never hard-code a
   brand colour in a page stylesheet.

   These are the v4 brand values, with the client's Pantone references. The
   logo artwork is drawn a shade off two of them — #004852 and #CEDE45 rather
   than #004952 and #C4D93A — so the build script repaints the logo with the
   measured ink colours and everything else on the page uses the values here.
   ========================================================================== */

/* --- Self-hosted webfonts -------------------------------------------------
   Two faces, both variable, both served from our own origin: no third-party
   font requests, so nothing to disclose in a cookie/privacy banner and one
   less domain in the critical path.

   Mulish   stands in for Avenir Next where Avenir isn't installed.
   Gelasio  is metrically compatible with Georgia, so the serif headline holds
            its exact line breaks on Android/Linux where Georgia is absent.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Mulish";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/mulish-latin-var.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Mulish";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/mulish-latin-ext-var.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Gelasio";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("../fonts/gelasio-latin-var.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- Brand utilities ------------------------------------------------------
   The trademark mark on "The NUii Way to Healthy". It lives here rather than in
   a page stylesheet because the tagline appears on the hero, in the confirmation
   overlay, and in the brand specimen, and tokens.css is the only stylesheet
   every page imports. Sizing is em-relative so it scales with its context, and
   line-height 0 stops superscripting it from adding leading to the line.
   -------------------------------------------------------------------------- */
.tm {
  font-size: 0.38em;
  vertical-align: super;
  line-height: 0;
  margin-left: 0.08em;
}

:root {
  /* --- Core palette (v4, 2026-09-25) -------------------------------------
     The client's v4 brand spec, Pantone references included. The logo artwork
     is drawn a shade off these values (#004852 / #CEDE45); the measured ink
     colours live in tools/build_brand_assets.py and are used only when
     repainting the logo itself. Everything on the page uses the values here. */
  --nuii-lime: #c4d93a;        /* Pantone 381 PC   accent, rules, highlights  */
  --nuii-teal: #004952;        /* Pantone 7476 PC  primary: headings, buttons */
  --nuii-deep: #00202f;        /* Pantone 546 PC   display headlines          */
  --nuii-gray: #e7e7e4;        /* Pantone Cool Gray 1   page field            */
  --nuii-gray-light: #f3f3f1;  /* top of the page gradient, panel fills       */
  --nuii-ink: #1d3a44;         /* body copy                                   */
  --nuii-muted: #5a6a6f;       /* secondary copy and fine print               */
  --nuii-line: #c9cdc8;        /* hairlines and input borders                 */
  --nuii-white: #fff;

  /* Semantic aliases — page CSS should prefer these. Restyling a future page
     means repointing an alias, not hunting hex codes. */
  --nuii-bg: var(--nuii-gray);
  --nuii-text: var(--nuii-deep);
  --nuii-accent: var(--nuii-lime);
  --nuii-action: var(--nuii-teal);
  --nuii-action-hover: var(--nuii-deep);
  --nuii-focus: var(--nuii-teal);
  --nuii-error: #a4331f;
  --nuii-success: var(--nuii-teal);

  /* --- Type ------------------------------------------------------------- */
  --nuii-font-sans: "Avenir Next", Avenir, "Mulish", "Helvetica Neue", Helvetica,
    Arial, sans-serif;
  --nuii-font-serif: Georgia, "Gelasio", "Times New Roman", times, serif;

  --nuii-tracking-eyebrow: 0.29em;  /* "COMING SOON"                          */
  --nuii-tracking-label: 0.13em;    /* section micro-labels                   */

  /* --- Space, radius, elevation ----------------------------------------- */
  --nuii-gutter: 88px;           /* desktop page inset, matches the mockup    */
  --nuii-gutter-md: 58px;
  --nuii-gutter-sm: 22px;
  --nuii-radius: 7px;
  --nuii-radius-lg: 18px;        /* email card, panels                        */
  --nuii-control-h: 58px;        /* inputs and buttons                        */
  --nuii-ring: 0 0 0 3px rgba(196, 217, 58, 0.45);
}