/* ============================================================================
   ozehr LLC — shared design tokens, v1
   ----------------------------------------------------------------------------
   CANONICAL: ozehrai.github.io/assets/css/tokens.css
   MIRROR:    justaskoz.github.io/src/tokens.css   (must stay byte-identical)

   justaskoz CI fetches the canonical copy and diffs it. Edit one, edit both.

   Structure:
     1. Primitives  (--oz-*)   raw values on a numeric ramp. Never used by
                               components directly.
     2. Semantics   (unprefixed) describe USE, not appearance. Components only
                               ever reference these.
     3. Brand theme            [data-brand="justaskoz"] swaps the paper.
                               :root is the ozehr (warm) theme.

   Accent is #007477 — the first gradient stop of the logo's oz-base stroke.

   The canvas is white-forward on both sites, matching the direction already
   shipping on justaskoz.com. Warm ivory is an accent band, never the page.
   ========================================================================== */

:root {
  color-scheme: light;

  /* ---------------------------------------------------------------- 1. primitives */

  /* teal — sampled from the logo mark gradients */
  --oz-teal-900: #04292c;
  --oz-teal-800: #043943; /* logo oz-base end   → dark bands, footer */
  --oz-teal-700: #005e63; /* teal as TEXT, button hover                7.2:1 on ivory */
  --oz-teal-600: #007477; /* logo oz-base start → canonical accent fill 5.6:1 w/ white */
  --oz-teal-500: #008e88; /* logo oz-base mid   → decorative only */
  --oz-teal-300: #54c8c6; /* logo oz-right mid  → decorative only */
  --oz-teal-200: #9bd7d4; /* accent text on dark bands                 7.8:1 on teal-800 */
  --oz-teal-100: #d7e9e8;
  --oz-teal-050: #eaf3f2;

  /* ink */
  --oz-ink-900: #0f2f33; /* headings          13.0:1 on ivory */
  --oz-ink-700: #35545a; /* body               7.5:1 on ivory */
  --oz-ink-500: #55696d; /* muted, captions    5.6:1 on ivory */
  --oz-ink-400: #78898c; /* field borders      3.5:1 — meets SC 1.4.11 */
  --oz-ink-300: #8fa2a5; /* DECORATIVE ONLY    2.7:1 — never text */

  /* paper */
  --oz-white: #ffffff;
  --oz-paper-050: #fbfaf7;
  --oz-paper-100: #f7f4ee; /* warm canvas — ozehr */
  --oz-paper-150: #efe9de;
  --oz-cool-050: #fbfcfc;
  --oz-cool-100: #f8fafa; /* cool canvas — justaskoz */
  --oz-sand: #efe3d4;

  /* status — all ≥ 5.9:1 on white */
  --oz-success: #176c4a;
  --oz-warning: #8a5a08;
  --oz-error: #a32a25;

  /* ---------------------------------------------------------------- 2. semantics */

  /* surfaces */
  --canvas: var(--oz-white);
  --canvas-alt: var(--oz-cool-100);
  --canvas-band: var(--oz-teal-050);
  --canvas-warm: var(--oz-paper-100);
  --canvas-deep: var(--oz-teal-800);
  --surface: var(--oz-white);
  --white: var(--oz-white);

  /* text */
  --ink: var(--oz-ink-900);
  --ink-body: var(--oz-ink-700);
  --ink-muted: var(--oz-ink-500);
  --ink-on-deep: #ffffff;
  --ink-muted-on-deep: rgba(255, 255, 255, 0.72);

  /* accent */
  --accent: var(--oz-teal-600); /* fills; pair with white text */
  --accent-hover: var(--oz-teal-700);
  --accent-text: var(--oz-teal-700); /* teal used AS text or links */
  --accent-on-deep: var(--oz-teal-200);
  --accent-wash: var(--oz-teal-050);

  /* lines */
  --line: #e3eae9; /* hairline, decorative */
  --line-strong: #cfdbda;
  --line-field: var(--oz-ink-400); /* interactive borders — must hit 3:1 */
  --line-on-deep: rgba(255, 255, 255, 0.16);

  /* ---------------------------------------------------------------- space, 4px base */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 40px;
  --space-8: 56px;
  --space-9: 72px;
  --space-10: 96px;
  --space-11: 128px;

  /* ---------------------------------------------------------------- rhythm */
  --section-y: clamp(64px, 7.5vw, 104px);
  --section-y-lg: clamp(80px, 9vw, 128px);
  --section-y-sm: clamp(48px, 5.5vw, 72px);
  --stack-gap: clamp(20px, 2.2vw, 28px);
  --grid-gap: clamp(16px, 1.8vw, 28px);
  --gutter: clamp(20px, 4vw, 40px);
  --container: 1200px;

  /* line-length caps */
  --measure: 62ch;
  --measure-lede: 38ch;
  --measure-title: 17ch;

  /* ---------------------------------------------------------------- type */
  --font-serif: "Newsreader", "Iowan Old Style", Georgia, serif;
  --font-sans: "Plus Jakarta Sans", "Avenir Next", "Segoe UI", system-ui, sans-serif;

  --text-display: clamp(40px, 4.4vw, 60px);
  --text-h1: clamp(36px, 3.8vw, 50px);
  --text-h2: clamp(28px, 2.8vw, 38px);
  --text-h3: clamp(20px, 1.1vw + 14px, 24px);
  --text-lede: clamp(17px, 0.6vw + 15px, 20px);
  --text-body: 17px;
  --text-sm: 15px;
  --text-xs: 13px;
  --text-label: 12px;

  --leading-display: 1.02;
  --leading-title: 1.1;
  --leading-body: 1.6;
  --leading-tight: 1.35;

  --tracking-display: -0.028em;
  --tracking-title: -0.022em;
  --tracking-label: 0.1em;

  /* ---------------------------------------------------------------- radius */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* ---------------------------------------------------------------- elevation
     Tight and low-alpha on purpose. Nothing floats; --elev-0 is the resting
     state for every component except the sticky header and modals. */
  --elev-0: none;
  --elev-1: 0 1px 2px rgba(4, 41, 44, 0.05);
  --elev-2: 0 6px 16px -8px rgba(4, 41, 44, 0.14);
  --elev-3: 0 18px 44px -24px rgba(4, 41, 44, 0.2);
  --elev-modal: 0 32px 80px -32px rgba(4, 41, 44, 0.35);

  /* ---------------------------------------------------------------- motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-1: 120ms;
  --dur-2: 180ms;
  --dur-3: 260ms;
  --dur-4: 420ms;

  /* ---------------------------------------------------------------- focus */
  --focus-ring: 3px;
  --focus-offset: 3px;
  --focus-color: var(--oz-teal-700);

  /* ---------------------------------------------------------------- z-index */
  --z-base: 0;
  --z-raised: 10;
  --z-sticky: 100;
  --z-header: 200;
  --z-dropdown: 300;
  --z-overlay: 400;
  --z-modal: 500;
  --z-toast: 600;
  --z-skiplink: 900;
}

/* ---------------------------------------------------------------- 3. brand theme
   Both sites share the canvas, accent, and type. justaskoz runs a wider
   measure because its product frames are larger. */
[data-brand="justaskoz"] {
  --container: 1320px;
}

/* Dark bands invert the focus ring so it stays visible against deep teal. */
.is-deep,
.tone-band-dark,
.section-deep,
.footer,
.site-footer {
  --focus-color: var(--accent-on-deep);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-1: 1ms;
    --dur-2: 1ms;
    --dur-3: 1ms;
    --dur-4: 1ms;
  }
}