/* new-home design tokens - "cinema" (dark-first) with a proper light theme.
 *
 * The brand: the CoVince mark is a teal-to-black shield with a mountain ridge and rays of light
 * (to grow. to gather.), set in a geometric sans. The system keeps that: deep ink backgrounds,
 * one teal accent that glows in the dark and deepens in the light, a warm "first light" highlight
 * used sparingly, and Jost (a geometric sans in the same family of shapes as the logotype).
 *
 * Layers: primitives (--nh-p-*) -> semantic (--nh-*). Sections use SEMANTIC tokens only.
 * Themes: dark on :root; light via prefers-color-scheme (unless data-theme="dark") or data-theme="light".
 * Local surfaces: data-surface="dark" / "light" re-declares the semantic set on any element
 *                 (a film strip stays dark in the light theme: <div data-surface="dark">).
 *
 * Contrast (WCAG, measured on the matching --nh-bg): see the "pairs" notes beside each text token.
 */

@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(fonts/jost-latin.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: 'Jost';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(fonts/jost-latin-ext.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;
}
/* Metric-matched fallback so the swap to Jost does not shift the layout. */
@font-face {
  font-family: 'Jost Fallback';
  src: local('Arial'), local('Helvetica Neue'), local('Helvetica');
  size-adjust: 94%;
  ascent-override: 107%;
  descent-override: 37%;
  line-gap-override: 0%;
}

:root {
  /* ---------- primitives ---------- */
  /* teal - from the mark (#0a6063 is the brand teal of the existing site) */
  --nh-p-teal-950: #021312;
  --nh-p-teal-900: #04201f;
  --nh-p-teal-800: #073a3a;
  --nh-p-teal-700: #0a6063;
  --nh-p-teal-600: #0c7477;
  --nh-p-teal-500: #13989a;
  --nh-p-teal-400: #2fbab3;
  --nh-p-teal-300: #62d6cd;
  --nh-p-teal-200: #a6ebe3;
  --nh-p-teal-100: #dcf6f2;
  /* ink - neutrals with a whisper of teal, so greys never look dead next to the accent */
  --nh-p-ink-0: #ffffff;
  --nh-p-ink-25: #fbfcfb;
  --nh-p-ink-50: #f3f6f5;
  --nh-p-ink-100: #e7ecea;
  --nh-p-ink-200: #d3dad8;
  --nh-p-ink-300: #b3bdbb;
  --nh-p-ink-400: #8e9a98;
  --nh-p-ink-500: #6b7876;
  --nh-p-ink-600: #4c5856;
  --nh-p-ink-700: #313b3a;
  --nh-p-ink-800: #1b2322;
  --nh-p-ink-850: #131a19;
  --nh-p-ink-900: #0c1211;
  --nh-p-ink-950: #050808;
  /* first light - the warm edge of the ridge; highlights only, never body text on light */
  --nh-p-dawn-300: #ffd9a0;
  --nh-p-dawn-400: #f6b96b;
  --nh-p-dawn-600: #9a5a12;
  /* status */
  --nh-p-ok: #3fcf8e;
  --nh-p-ok-deep: #13784b;
  --nh-p-warn: #f5b84a;
  --nh-p-warn-deep: #8a5a00;
  --nh-p-bad: #ff6b6b;
  --nh-p-bad-deep: #b3261e;

  /* ---------- type ---------- */
  --nh-font-display: 'Jost', 'Jost Fallback', 'Century Gothic', 'Futura', ui-sans-serif, system-ui, sans-serif;
  --nh-font-text: 'Jost', 'Jost Fallback', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --nh-font-mono: ui-monospace, 'SFMono-Regular', 'Cascadia Mono', Consolas, monospace;

  /* fluid scale: 360px -> 1440px */
  --nh-fs-2xs: 0.75rem;                                         /* 12 - legal, captions */
  --nh-fs-xs: 0.8125rem;                                        /* 13 - eyebrows */
  --nh-fs-sm: 0.9375rem;                                        /* 15 - UI, nav */
  --nh-fs-base: 1.0625rem;                                      /* 17 - body */
  --nh-fs-lg: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);     /* 18-21 - lead */
  --nh-fs-xl: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);         /* 22-28 - card titles */
  --nh-fs-2xl: clamp(1.75rem, 1.4rem + 1.6vw, 2.625rem);        /* 28-42 - h3 */
  --nh-fs-3xl: clamp(2.25rem, 1.6rem + 3vw, 4rem);              /* 36-64 - h2 */
  --nh-fs-display: clamp(2.75rem, 1.6rem + 5.4vw, 6.5rem);      /* 44-104 - section statements */
  --nh-fs-mega: clamp(3.25rem, 1.4rem + 8.8vw, 10rem);          /* 52-160 - the one big moment */

  --nh-lh-tight: 1.02;
  --nh-lh-snug: 1.15;
  --nh-lh-heading: 1.1;
  --nh-lh-text: 1.6;
  --nh-tracking-mega: -0.035em;
  --nh-tracking-display: -0.025em;
  --nh-tracking-heading: -0.015em;
  --nh-tracking-text: 0;
  --nh-tracking-eyebrow: 0.18em;
  --nh-weight-light: 300;
  --nh-weight-regular: 400;
  --nh-weight-medium: 500;
  --nh-weight-semibold: 600;
  --nh-weight-bold: 700;
  --nh-measure: 64ch;

  /* ---------- space (4px grid) ---------- */
  --nh-space-1: 0.25rem;   /* 4 */
  --nh-space-2: 0.5rem;    /* 8 */
  --nh-space-3: 0.75rem;   /* 12 */
  --nh-space-4: 1rem;      /* 16 */
  --nh-space-5: 1.5rem;    /* 24 */
  --nh-space-6: 2rem;      /* 32 */
  --nh-space-7: 3rem;      /* 48 */
  --nh-space-8: 4rem;      /* 64 */
  --nh-space-9: 6rem;      /* 96 */
  --nh-space-10: 8rem;     /* 128 */
  --nh-space-11: 12rem;    /* 192 */
  --nh-gutter: clamp(1rem, 0.5rem + 2.4vw, 3rem);             /* 16 on a phone, 48 on a laptop */
  --nh-section-y: clamp(5rem, 3rem + 8vw, 11rem);
  --nh-container: 80rem;      /* 1280 */
  --nh-container-wide: 100rem;/* 1600 */
  --nh-container-text: 44rem; /* 704 */
  --nh-nav-h: 64px;
  --nh-tap: 44px;             /* minimum target */

  /* ---------- radii ---------- */
  --nh-radius-xs: 6px;
  --nh-radius-sm: 10px;
  --nh-radius-md: 16px;
  --nh-radius-lg: 24px;
  --nh-radius-xl: 36px;
  --nh-radius-2xl: 56px;
  --nh-radius-pill: 999px;
  --nh-radius-round: 50%;

  /* ---------- motion ---------- */
  --nh-dur-instant: 90ms;
  --nh-dur-fast: 160ms;
  --nh-dur-base: 260ms;
  --nh-dur-slow: 480ms;
  --nh-dur-slower: 800ms;
  --nh-dur-cinema: 1400ms;   /* push-ins, crossfades */
  --nh-dur-drift: 24s;       /* slow ambient drift of rings/footage */
  --nh-ease-out: cubic-bezier(0.16, 1, 0.3, 1);        /* expo-out: arrivals */
  --nh-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);    /* scene changes */
  --nh-ease-in: cubic-bezier(0.7, 0, 0.84, 0);         /* exits */
  --nh-ease-cinema: cubic-bezier(0.22, 1, 0.36, 1);    /* camera moves */
  --nh-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* small pops only */
  --nh-move: 1;              /* multiply translate/scale distances by this; 0 under reduced motion */
  --nh-reveal-distance: 28px;

  /* ---------- z ladder ---------- */
  --nh-z-below: -1;
  --nh-z-base: 0;
  --nh-z-raised: 1;
  --nh-z-overlay-local: 10;  /* captions/controls over footage inside a section */
  --nh-z-sticky: 100;        /* sticky scenes inside sections */
  --nh-z-nav: 1000;
  --nh-z-menu: 2000;         /* mobile menu sheet */
  --nh-z-modal: 3000;        /* video lightbox */
  --nh-z-toast: 4000;
  --nh-z-skip: 5000;

  /* ---------- the dark ("cinema") semantic set ---------- */
  color-scheme: dark;
  --nh-bg: var(--nh-p-ink-950);              /* page */
  --nh-bg-raised: var(--nh-p-ink-900);       /* alternating band */
  --nh-surface: var(--nh-p-ink-850);         /* cards */
  --nh-surface-2: var(--nh-p-ink-800);       /* card on card, inputs */
  --nh-surface-glass: rgba(8, 13, 12, 0.72);/* nav, floating chrome (with backdrop blur) */
  --nh-scrim: rgba(3, 6, 6, 0.72);           /* behind menus/modals */
  --nh-film-scrim: linear-gradient(180deg, rgba(5,8,8,0) 0%, rgba(5,8,8,.35) 55%, rgba(5,8,8,.92) 100%);
  --nh-text: var(--nh-p-ink-50);             /* 18.5:1 on bg */
  --nh-text-muted: var(--nh-p-ink-300);      /* 10.5:1 on bg, 9.2:1 on surface */
  --nh-text-subtle: var(--nh-p-ink-400);     /* 6.9:1 on bg, 6.1:1 on surface - small print */
  --nh-text-on-media: #ffffff;               /* always on a scrim */
  --nh-heading: #ffffff;
  --nh-accent: var(--nh-p-teal-300);         /* 11.5:1 on bg - links, highlights, icons */
  --nh-accent-strong: var(--nh-p-teal-400);  /* 8.4:1 on bg - large accents, rings */
  --nh-accent-soft: rgba(98, 214, 205, 0.12);
  --nh-accent-glow: rgba(47, 186, 179, 0.35);
  --nh-highlight: var(--nh-p-dawn-300);      /* 15:1 on bg - "first light" words */
  --nh-border: rgba(233, 242, 240, 0.12);
  --nh-border-strong: rgba(233, 242, 240, 0.24);
  --nh-divider: rgba(233, 242, 240, 0.08);
  /* primary door: bright on dark (Apple-style) - text 10.9:1 */
  --nh-btn-primary-bg: var(--nh-p-teal-300);
  --nh-btn-primary-bg-hover: var(--nh-p-teal-200);
  --nh-btn-primary-text: var(--nh-p-teal-950);
  /* secondary door: outlined on glass - text 18.9:1, border 3:1+ */
  --nh-btn-secondary-bg: rgba(255, 255, 255, 0.06);
  --nh-btn-secondary-bg-hover: rgba(255, 255, 255, 0.12);
  --nh-btn-secondary-text: var(--nh-p-ink-50);
  --nh-btn-secondary-border: rgba(233, 242, 240, 0.42);
  --nh-ok: var(--nh-p-ok);
  --nh-warn: var(--nh-p-warn);
  --nh-bad: var(--nh-p-bad);
  --nh-focus: var(--nh-p-teal-300);
  --nh-focus-halo: rgba(98, 214, 205, 0.35);
  --nh-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5);
  --nh-shadow-2: 0 6px 20px -6px rgba(0, 0, 0, 0.6), 0 1px 0 rgba(255, 255, 255, 0.04) inset;
  --nh-shadow-3: 0 24px 60px -20px rgba(0, 0, 0, 0.75), 0 1px 0 rgba(255, 255, 255, 0.05) inset;
  --nh-shadow-4: 0 40px 120px -30px rgba(0, 0, 0, 0.9);
  --nh-shadow-glow: 0 0 0 1px rgba(98, 214, 205, 0.25), 0 12px 48px -12px rgba(47, 186, 179, 0.55);
  --nh-grain-opacity: 0.07;
  --nh-vignette: radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(0, 0, 0, 0.55) 100%);
  --nh-mark-top: #2d8f8b;       /* the logo shield gradient, tuned per theme */
  --nh-mark-bottom: #0a3e3f;
}

/* ---------- light semantic set ---------- */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --nh-bg: var(--nh-p-ink-25);
    --nh-bg-raised: var(--nh-p-ink-50);
    --nh-surface: var(--nh-p-ink-0);
    --nh-surface-2: var(--nh-p-ink-50);
    --nh-surface-glass: rgba(251, 252, 251, 0.84);
    --nh-scrim: rgba(12, 18, 17, 0.45);
    --nh-film-scrim: linear-gradient(180deg, rgba(5,8,8,0) 0%, rgba(5,8,8,.35) 55%, rgba(5,8,8,.9) 100%);
    --nh-text: var(--nh-p-ink-900);            /* 18.4:1 on bg */
    --nh-text-muted: var(--nh-p-ink-600);      /* 7.2:1 on bg */
    --nh-text-subtle: #5a6765;                 /* 5.6:1 on bg, 5.3:1 on raised */
    --nh-heading: var(--nh-p-ink-950);
    --nh-accent: var(--nh-p-teal-700);         /* 7.1:1 on bg */
    --nh-accent-strong: var(--nh-p-teal-600);  /* 5.4:1 on bg */
    --nh-accent-soft: rgba(10, 96, 99, 0.08);
    --nh-accent-glow: rgba(19, 152, 154, 0.25);
    --nh-highlight: var(--nh-p-dawn-600);      /* 5.3:1 on bg */
    --nh-border: rgba(12, 18, 17, 0.12);
    --nh-border-strong: rgba(12, 18, 17, 0.24);
    --nh-divider: rgba(12, 18, 17, 0.08);
    --nh-btn-primary-bg: var(--nh-p-teal-700);   /* white text 7.3:1 */
    --nh-btn-primary-bg-hover: var(--nh-p-teal-800);
    --nh-btn-primary-text: #ffffff;
    --nh-btn-secondary-bg: rgba(255, 255, 255, 0.7);
    --nh-btn-secondary-bg-hover: var(--nh-p-ink-0);
    --nh-btn-secondary-text: var(--nh-p-ink-900);
    --nh-btn-secondary-border: rgba(12, 18, 17, 0.38);
    --nh-ok: var(--nh-p-ok-deep);
    --nh-warn: var(--nh-p-warn-deep);
    --nh-bad: var(--nh-p-bad-deep);
    --nh-focus: var(--nh-p-teal-700);
    --nh-focus-halo: rgba(10, 96, 99, 0.25);
    --nh-shadow-1: 0 1px 2px rgba(12, 18, 17, 0.08);
    --nh-shadow-2: 0 6px 20px -8px rgba(12, 18, 17, 0.18);
    --nh-shadow-3: 0 24px 60px -24px rgba(12, 18, 17, 0.28);
    --nh-shadow-4: 0 40px 120px -40px rgba(12, 18, 17, 0.4);
    --nh-shadow-glow: 0 0 0 1px rgba(10, 96, 99, 0.2), 0 12px 40px -14px rgba(10, 96, 99, 0.45);
    --nh-grain-opacity: 0.045;
    --nh-vignette: radial-gradient(120% 90% at 50% 45%, transparent 60%, rgba(0, 0, 0, 0.35) 100%);
    --nh-mark-top: #117a79;
    --nh-mark-bottom: #03211f;
  }
}
:root[data-theme="light"], [data-surface="light"] {
  color-scheme: light;
  --nh-bg: var(--nh-p-ink-25);
  --nh-bg-raised: var(--nh-p-ink-50);
  --nh-surface: var(--nh-p-ink-0);
  --nh-surface-2: var(--nh-p-ink-50);
  --nh-surface-glass: rgba(251, 252, 251, 0.84);
  --nh-scrim: rgba(12, 18, 17, 0.45);
  --nh-film-scrim: linear-gradient(180deg, rgba(5,8,8,0) 0%, rgba(5,8,8,.35) 55%, rgba(5,8,8,.9) 100%);
  --nh-text: var(--nh-p-ink-900);
  --nh-text-muted: var(--nh-p-ink-600);
  --nh-text-subtle: #5a6765;
  --nh-heading: var(--nh-p-ink-950);
  --nh-accent: var(--nh-p-teal-700);
  --nh-accent-strong: var(--nh-p-teal-600);
  --nh-accent-soft: rgba(10, 96, 99, 0.08);
  --nh-accent-glow: rgba(19, 152, 154, 0.25);
  --nh-highlight: var(--nh-p-dawn-600);
  --nh-border: rgba(12, 18, 17, 0.12);
  --nh-border-strong: rgba(12, 18, 17, 0.24);
  --nh-divider: rgba(12, 18, 17, 0.08);
  --nh-btn-primary-bg: var(--nh-p-teal-700);
  --nh-btn-primary-bg-hover: var(--nh-p-teal-800);
  --nh-btn-primary-text: #ffffff;
  --nh-btn-secondary-bg: rgba(255, 255, 255, 0.7);
  --nh-btn-secondary-bg-hover: var(--nh-p-ink-0);
  --nh-btn-secondary-text: var(--nh-p-ink-900);
  --nh-btn-secondary-border: rgba(12, 18, 17, 0.38);
  --nh-ok: var(--nh-p-ok-deep);
  --nh-warn: var(--nh-p-warn-deep);
  --nh-bad: var(--nh-p-bad-deep);
  --nh-focus: var(--nh-p-teal-700);
  --nh-focus-halo: rgba(10, 96, 99, 0.25);
  --nh-shadow-1: 0 1px 2px rgba(12, 18, 17, 0.08);
  --nh-shadow-2: 0 6px 20px -8px rgba(12, 18, 17, 0.18);
  --nh-shadow-3: 0 24px 60px -24px rgba(12, 18, 17, 0.28);
  --nh-shadow-4: 0 40px 120px -40px rgba(12, 18, 17, 0.4);
  --nh-shadow-glow: 0 0 0 1px rgba(10, 96, 99, 0.2), 0 12px 40px -14px rgba(10, 96, 99, 0.45);
  --nh-grain-opacity: 0.045;
  --nh-vignette: radial-gradient(120% 90% at 50% 45%, transparent 60%, rgba(0, 0, 0, 0.35) 100%);
  --nh-mark-top: #117a79;
  --nh-mark-bottom: #03211f;
}

/* A dark surface inside the light theme (film strips, the hero stage): the cinema set again. */
[data-surface="dark"] {
  color-scheme: dark;
  --nh-bg: var(--nh-p-ink-950);
  --nh-bg-raised: var(--nh-p-ink-900);
  --nh-surface: var(--nh-p-ink-850);
  --nh-surface-2: var(--nh-p-ink-800);
  --nh-surface-glass: rgba(8, 13, 12, 0.72);
  --nh-scrim: rgba(3, 6, 6, 0.72);
  --nh-text: var(--nh-p-ink-50);
  --nh-text-muted: var(--nh-p-ink-300);
  --nh-text-subtle: var(--nh-p-ink-400);
  --nh-heading: #ffffff;
  --nh-accent: var(--nh-p-teal-300);
  --nh-accent-strong: var(--nh-p-teal-400);
  --nh-accent-soft: rgba(98, 214, 205, 0.12);
  --nh-accent-glow: rgba(47, 186, 179, 0.35);
  --nh-highlight: var(--nh-p-dawn-300);
  --nh-border: rgba(233, 242, 240, 0.12);
  --nh-border-strong: rgba(233, 242, 240, 0.24);
  --nh-divider: rgba(233, 242, 240, 0.08);
  --nh-btn-primary-bg: var(--nh-p-teal-300);
  --nh-btn-primary-bg-hover: var(--nh-p-teal-200);
  --nh-btn-primary-text: var(--nh-p-teal-950);
  --nh-btn-secondary-bg: rgba(255, 255, 255, 0.06);
  --nh-btn-secondary-bg-hover: rgba(255, 255, 255, 0.12);
  --nh-btn-secondary-text: var(--nh-p-ink-50);
  --nh-btn-secondary-border: rgba(233, 242, 240, 0.42);
  --nh-focus: var(--nh-p-teal-300);
  --nh-focus-halo: rgba(98, 214, 205, 0.35);
  --nh-grain-opacity: 0.07;
  --nh-mark-top: #2d8f8b;
  --nh-mark-bottom: #0a3e3f;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --nh-move: 0;
    --nh-reveal-distance: 0px;
    --nh-dur-cinema: 400ms;
    --nh-dur-slower: 400ms;
    --nh-dur-drift: 0s;
    --nh-ease-spring: var(--nh-ease-out);
  }
}