/* Design tokens shared by every tier: foundation -> semantic. Components and tiers read these; nothing hardcodes a colour,
   a duration or a z-index. A tier may add contextual tokens on top (see tiers/<tier>/), never redefine the brand.

   Provenance (NexVerto/NexVerto@9c16799, apps/website/public/premium.css):
   colour tokens lines 10-39, motion tokens line 734, 8 px rhythm lines 634-640, wordmark colours lines 491-495.
   Added here: the type scale, spacing scale, radii, z-index layer tokens and motion distances, so the values the
   nexverto.com stylesheet repeats inline live in one place. */

:root,
html[data-theme="dark"] {
  /* Colour: dark is the default; light follows the visitor's choice. */
  --bg: #10191f;
  --surface: #152029;
  --surface-2: #1a2731;
  --surface-3: #22313d;
  --ink: #f3f3ed;
  --ink-muted: #b9c5cc;
  --ink-dim: #97a7b1;
  --border: #263540;
  --border-strong: #3b4d5a;
  --brand: #104fb6;          /* the one brand blue */
  --brand-ink: #ffffff;
  --accent: #8cbfff;         /* text blue on dark only */
  --verto: #2d6fd9;          /* wordmark "Verto" */
  --wordmark-nex: #f2f5f9;
  --shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 14px 34px rgba(0,0,0,.32);
  --shadow-lift: 0 1px 0 rgba(255,255,255,.05) inset, 0 20px 44px rgba(0,0,0,.42);
  color-scheme: dark;
}
html[data-theme="light"] {
  --bg: #faf9f5;
  --surface: #ffffff;
  --surface-2: #f1f0ea;
  --surface-3: #e8e7e0;
  --ink: #132430;
  --ink-muted: #475863;
  --ink-dim: #5a6a75;
  --border: #e1dfd7;
  --border-strong: #c4c1b7;
  --brand: #104fb6;
  --brand-ink: #ffffff;
  --accent: #104fb6;
  --verto: #2d6fd9;
  --wordmark-nex: #0b1220;
  --shadow: 0 1px 2px rgba(19,36,48,.05), 0 10px 28px rgba(19,36,48,.07);
  --shadow-lift: 0 2px 4px rgba(19,36,48,.06), 0 18px 40px rgba(19,36,48,.11);
  color-scheme: light;
}

:root {
  /* Buttons lit from above (NexVerto-Standards, UX standard, BUTTONS): light line inside the top edge, darker line inside the bottom
     edge, a soft glow in the button's own colour, a tight dark shadow where it touches the page. */
  --btn-lit: inset 0 1px 0 rgb(255 255 255 / .28), inset 0 -2px 0 rgb(0 0 0 / .2), 0 10px 24px -8px color-mix(in srgb, var(--brand) 62%, transparent), 0 1px 2px rgb(11 18 32 / .38);
  --btn-lit-hover: inset 0 1px 0 rgb(255 255 255 / .32), inset 0 -2px 0 rgb(0 0 0 / .2), 0 16px 32px -10px color-mix(in srgb, var(--brand) 70%, transparent), 0 1px 2px rgb(11 18 32 / .38);
  --btn-lit-press: inset 0 1px 0 rgb(255 255 255 / .14), inset 0 -1px 0 rgb(0 0 0 / .16), 0 4px 10px -4px color-mix(in srgb, var(--brand) 50%, transparent), 0 0 1px rgb(11 18 32 / .45);

  /* Type families (core/fonts/fonts.css). */
  --font-display: "Geist", "Geist Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --font-body: "IBM Plex Sans", "IBM Plex Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --font-wordmark: "IBM Plex Sans", "IBM Plex Fallback", Arial, sans-serif;

  /* Fluid type scale (320 px -> 1440 px). Body never below 17 px. */
  --text-xs: 0.8125rem;                               /* 13 */
  --text-sm: 0.9375rem;                               /* 15 */
  --text-body: clamp(1.0625rem, 1rem + .2vw, 1.125rem); /* 17-18 */
  --text-lede: clamp(1.1875rem, 1.05rem + .5vw, 1.375rem);
  --text-h3: clamp(1.25rem, 1.1rem + .6vw, 1.625rem);
  --text-h2: clamp(2rem, 1.4rem + 2.6vw, 3.5rem);
  --text-display: clamp(3rem, 1.6rem + 6.4vw, 8.5rem);

  /* Space on an 8 px scale. */
  --space-1: 4px;  --space-2: 8px;  --space-3: 16px; --space-4: 24px;
  --space-5: 32px; --space-6: 48px; --space-7: 64px; --space-8: 88px; --space-9: 128px;
  --page-gutter: clamp(16px, 4vw, 64px);
  --page-max: 1320px;

  /* Corners. */
  --radius-1: 6px; --radius-2: 10px; --radius-3: 18px;

  /* Motion: one easing family (ease-out to enter, ease-in to leave, in-out to move). */
  --dur-1: 120ms;   /* press, toggle */
  --dur-2: 180ms;   /* hover, link reveal, page crossfade */
  --dur-3: 400ms;   /* reveals, layout moves */
  --dur-4: 700ms;   /* signature draws, headline reveal */
  --dur-5: 1000ms;  /* longest one-shot sequence */
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --ease-out-expo: cubic-bezier(.16, 1, .3, 1);
  --ease-in: cubic-bezier(.55, 0, 1, .45);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-mechanical: cubic-bezier(.3, 0, 0, 1);
  --move-1: 4px; --move-2: 12px; --move-3: 24px;   /* distances */
  --stagger: 60ms;                                  /* max 5 items */

  /* Layers (spec section 2). Each layer root sets isolation:isolate, so these values only compete inside one parent
     stacking context; a transformed ancestor still traps its children whatever their z-index. */
  --z-background: 0;
  --z-environment: 1;
  --z-media: 2;
  --z-content: 3;
  --z-interactive: 4;
  --z-overlay: 50;
  --z-transition: 80;
  --z-system: 90;
}

/* nexverto.com link rule: no link carries a resting underline. */
a { text-decoration: none !important; }