/* ==========================================================================
   OraLabs corporate design tokens — extracted 2026-09-18
   ==========================================================================

   Every value in this file is copied verbatim out of the stylesheets already
   deployed at https://www.oralabs.com/ (styles.css, expansion.css,
   promotional.css, facility-videos.css). Nothing here is new, rounded, renamed
   or invented. If a value looks wrong, the deployed CSS is wrong, not this file.

   Purpose: one place a new page — the Instant Virtuals tool, the generated
   product detail pages — can read the system from, so it looks native in both
   the corporate shell and the promotional section rather than like an embedded
   third-party widget.

   HOW TO USE IT
   The deployed pages do NOT link this file, and they do not need to: styles.css
   already declares the same :root block. Link tokens.css only on a page that
   needs the tokens WITHOUT the full corporate stylesheet. On a normal page,
   link styles.css → expansion.css → promotional.css as the existing pages do
   and these tokens come with them.

   There are no webfonts anywhere in this system. The type stack is system-first
   by design: zero network cost and no flash of unstyled text. Do not add one.

   Companion document: docs/design-tokens.md
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Declared tokens — verbatim from styles.css :root
   -------------------------------------------------------------------------- */
:root {
  /* Brand blues */
  --navy-900: #06224f;
  --navy-800: #0a2e6e;
  --navy-700: #0d3b8a;   /* DEAD: zero var() references in any deployed stylesheet */
  --blue-600: #1156ad;
  --blue-500: #1565c0;
  --blue-400: #1e88e5;
  --blue-300: #4da3ee;

  /* Neutrals */
  --white: #ffffff;
  --pale-100: #f6faff;
  --pale-200: #eaf2fb;
  --pale-300: #d9e7f7;
  --gray-100: #f4f6f9;
  --gray-200: #e4e9f0;
  --gray-400: #9aa8bd;

  /* Text */
  --ink: #12233f;
  --text-muted: #566782;
  --on-dark: rgba(255, 255, 255, 0.86);

  /* Accents used on the four-way entry rings */
  --ring-retail: #1e88e5;    /* byte-identical to --blue-400 */
  --ring-private: #e04a3f;
  --ring-contract: #f2a516;
  --ring-promo: #9b7fd4;

  /* Gradients */
  --grad-hero: linear-gradient(160deg, #0a2e6e 0%, #114a97 45%, #1a6fc9 100%);
  --grad-band: linear-gradient(135deg, #0a2e6e 0%, #1156ad 60%, #1e88e5 100%);
  --grad-soft: linear-gradient(180deg, #f6faff 0%, #eaf2fb 100%);

  /* Shape + depth */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(6, 34, 79, 0.06), 0 2px 8px rgba(6, 34, 79, 0.05);
  --shadow-md: 0 4px 14px rgba(6, 34, 79, 0.09), 0 12px 28px rgba(6, 34, 79, 0.07);
  --shadow-lg: 0 10px 30px rgba(6, 34, 79, 0.13), 0 24px 60px rgba(6, 34, 79, 0.1);

  /* Rhythm */
  --gutter: 20px;
  --maxw: 1200px;
  --maxw-narrow: 880px;
  --section-y: 56px;

  /* Type stack — system-first for zero network cost and no FOUT */
  --font: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, Roboto,
    "Helvetica Neue", Arial, "Noto Sans", sans-serif;

  --header-h: 64px;
}


/* --------------------------------------------------------------------------
   2. Promotional section tokens — verbatim from promotional.css
   These are scoped to .promo-shell, NOT to :root. They do not resolve on a page
   that lacks class="promo-shell" on <body>, and every promotional page sets it.
   A tool page that must work in BOTH contexts cannot rely on them resolving.
   -------------------------------------------------------------------------- */
.promo-shell {
  --promo-accent: #7354b8;
  --promo-accent-dark: #53378f;
  --promo-accent-soft: #f2eefb;
  overflow-x: hidden;
}


/* --------------------------------------------------------------------------
   3. The reset the whole system depends on — verbatim from styles.css
   Every padding, border and min-height below assumes border-box, and every
   heading margin assumes the zeroed baseline. A page that links tokens.css
   without styles.css needs these or its box metrics will not match the site.
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img,
svg,
picture { max-width: 100%; display: block; }
img { height: auto; }

a { color: var(--blue-500); text-decoration: none; }
a:hover { text-decoration: underline; }

button { font: inherit; color: inherit; }

ul, ol { margin: 0; padding: 0; }

h1, h2, h3, h4, p { margin: 0; }

/* The focus ring is never removed anywhere in this system, only recoloured. */
:focus-visible {
  outline: 3px solid var(--blue-400);
  outline-offset: 3px;
  border-radius: 4px;
}
.on-dark :focus-visible,
.site-header__inner :focus-visible { outline-color: #ffd66b; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}


/* ==========================================================================
   4. DE-FACTO TOKENS — values in daily use that were never promoted to :root
   ==========================================================================

   Reference only. These are NOT declared as custom properties, because they are
   not declared as custom properties in the deployed CSS and this file does not
   introduce tokens the site does not have. Copy the literal when you need it.

   Colour literals
     #fff / #ffffff / white    the same colour written three ways, 47 occurrences
     #8fc4f5   .hero .eyebrow and .section--blue .eyebrow (eyebrow on dark)
     #9dc8f2   .rule-label (the hairline-flanked uppercase label, on dark)
     #ffd66b   focus ring on dark surfaces
     #f0f6ff   .btn--primary:hover background
     #cfc2eb   promotional card hover border
     #dfd5f3   .promo-trust border
     #174f99   middle stop of the promotional hero gradient
     #e6a600   hover state paired with --ring-contract
     rgba(255,255,255,0.07)  .stat-band background
     rgba(255,255,255,0.16)  .stat-band border
     rgba(255,255,255,0.32)  .rule-label hairlines
     rgba(255,255,255,0.7)   .btn--ghost border
     rgba(255,255,255,0.12)  .btn--ghost hover background
     rgba(255,255,255,0.22)  .promo-hero__media border
     rgba(4,24,57,0.28)      .promo-hero__media shadow
     rgba(21,101,192,0.15)   .promo-search input focus ring

   Type scale actually in use (rem)
     0.72   .rule-label
     0.75   .eyebrow, desktop nav links
     0.78   .promo-kicker
     0.82   .external-note
     0.84   .promo-bar__nav a, .filter-chip
     0.875  .way__desc
     0.90   .search-status
     0.9375 .btn, form inputs
     0.95   .promo-bar__title
     1.00   mobile nav links
     1.0625 .lede, .way__title
     1.125  h3
     1.18   .product-card__body h2
     clamp(1.35rem, 5vw, 1.9rem)     .stat__value
     clamp(1.55rem, 5.2vw, 2.5rem)   h2
     clamp(2rem, 7.5vw, 3.5rem)      h1

   Weights: 600 (mobile nav) · 700 (headings, buttons, eyebrow) · 750
   (.filter-chip) · 800 (.promo-bar__title, .promo-kicker, .site-nav__shop)

   Touch targets: 44px minimum (.link-arrow, footer links) · 46px (.nav-toggle)
   · 48px (.btn, .site-nav__list a, form inputs) · 42px (.filter-chip,
   .product-card__actions .btn) · 38px (.promo-bar__actions .btn)

   Transitions: 0.18s ease is the house speed for colour and transform;
   0.2s ease for ring cards; 0.22s ease for the nav-toggle bars;
   0.26s ease for the mobile drawer.

   Breakpoints present across the four stylesheets, ascending:
     479, 480, 599, 600, 639, 640, 768, 800, 899, 900, 1024, 1100, 1280
   The two that carry most of the layout: 640px (cards go two-up) and
   900px (cards go three- or four-up, promotional hero splits, desktop nav).
   ========================================================================== */