/*
 * PrivAccess Certify — Design Tokens
 * ----------------------------------------------------------------------
 * Lifted verbatim from the production marketing site (tokens.css).
 * Posture: dark navy + near-black, signature electric-cyan accent.
 * Editorial serif for display; geometric sans for UI; mono for IDs.
 *
 * Logical CSS properties only — no `left`/`right`/`margin-left`. Tailwind's
 * `ps-*`, `pe-*`, `ms-*`, `me-*` classes are the approved escape hatch for
 * RTL readiness.
 *
 * Aesthetic register:
 *   - Auditable. Restrained. Trust-first. Hairlines + flat surfaces.
 *   - Imagery is austere; no gradients on data, no decorative motion.
 *   - Severity is COLOR + TEXT, never color alone.
 *   - Wordmark + section titles: serif (editorial). UI chrome: sans.
 *   - One signature accent: electric cyan (#22d3ee), used sparingly,
 *     on dark backgrounds as the brand's "voltage."
 */

/* Brand fonts are self-hosted (assets/fonts/fonts.css, loaded from
   index.html) — no remote @import, so the page makes zero third-party
   requests and the CSP keeps style-src/font-src at 'self'. */

:root {
  /* ── Surfaces & ink ─────────────────────────────────────────────── */
  --bg:            #ffffff;
  --surface:       #f7f8fa;
  --surface-2:     #eef1f5;
  --ink:           #0a0e1a;
  --ink-muted:     #475569;
  --ink-faint:     #94a3b8;
  --border:        #e4e7ec;
  --border-strong: #cbd2db;

  /* ── Brand: deep navy ───────────────────────────────────────────── */
  --brand-950:     #050a1a;
  --brand-900:     #0a1430;
  --brand-800:     #11214d;
  --brand-700:     #1a2f6b;
  --brand-600:     #2a4894;
  --brand-500:     #3a5fbf;
  --brand-300:     #93a8db;
  --brand-100:     #dbe2f2;
  --brand-50:      #f1f4fb;

  --brand:         var(--brand-600);
  --brand-hover:   var(--brand-700);
  --brand-tint:    var(--brand-100);

  /* ── Signature accent: electric cyan ────────────────────────────── */
  --accent:        #22d3ee;
  --accent-bright: #67e8f9;
  --accent-deep:   #0891b2;

  /* Accent alpha ramp — the workhorse cyan tints (dark surfaces only).
     Replaces hand-typed rgba(34,211,238,α) (×40+). */
  --accent-a04: rgba(34, 211, 238, 0.04);
  --accent-a10: rgba(34, 211, 238, 0.10);
  --accent-a18: rgba(34, 211, 238, 0.18);
  --accent-a32: rgba(34, 211, 238, 0.32);
  --accent-a55: rgba(34, 211, 238, 0.55);

  /* ── Dark-surface ink ramp (consolidates 5 hexes → 3) ──────────────
     Use only on .section--ink / .section--dark / footer / form shell.
     #d3dae8 snaps to --ink-on-dark; #6f7d96 snaps to --ink-on-dark-faint. */
  --ink-on-dark:       #e6ebf5;
  --ink-on-dark-muted: #b6c0d4;
  --ink-on-dark-faint: #93a4bf;

  /* Dark hairlines / wells (consolidates 8 white-alpha steps → 4). */
  --border-on-dark:        rgba(255, 255, 255, 0.10);
  --border-on-dark-strong: rgba(255, 255, 255, 0.16);
  --well-on-dark:          rgba(255, 255, 255, 0.04);
  --well-on-dark-2:        rgba(255, 255, 255, 0.07);

  --focus-ring:       var(--brand-600);
  --focus-ring-dark:  var(--accent);
  --focus-ring-width:  2px;
  --focus-ring-offset: 2px;

  /* ── Severity scale ─────────────────────────────────────────────── */
  /* Sort weight: Critical=0, High=1, Medium=2, Low=3. WCAG AA. */
  --critical:        #c8102e;
  --critical-tint:   #fde7ea;
  --critical-strong: #a00d24;
  --high:            #b45309;
  --high-tint:       #fef3c7;
  --high-strong:     #92400e;
  --medium:          var(--brand-600);
  --medium-tint:     var(--brand-100);
  --low:             #117a3d;
  --low-tint:        #d6f1e0;
  --low-strong:      #0d5c2e;

  /* ── Decision palette (5 reviewer actions) ─────────────────────── */
  --decision-approve:   var(--low);
  --decision-revoke:    var(--critical);
  --decision-exception: var(--high);
  --decision-not-mine:  var(--ink-muted);
  --decision-clarify:   var(--ink-muted);

  /* ── Typography ─────────────────────────────────────────────────── */
  /* Serif: Source Serif 4 — substituting for GT Sectra/Tiempos. */
  /* Sans:  Inter — UI face for operator screens. */
  /* Mono:  JetBrains Mono — credentials, IDs, SoD codes. */
  --font-serif: "Source Serif 4", "Source Serif Pro", "Tiempos Headline",
                "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-sans:  "Inter", system-ui, -apple-system, "Segoe UI", Roboto,
                "Helvetica Neue", Arial, sans-serif;
  --font-mono:  "JetBrains Mono", ui-monospace, "SF Mono", "Cascadia Mono",
                "Roboto Mono", Menlo, Consolas, monospace;

  /* Type scale — PX RAMP (the component API; mirrors real usage).
     Components consume --text-* (px) or a --role-* token, never raw px.
     Half-px sizes (13.5/14.5/10.5/12.5/11.5) snap to the nearest step. */
  --text-2xs:     11px;
  --text-xs:      12px;
  --text-sm:      13px;
  --text-base:    14px;
  --text-md:      15px;
  --text-lg:      16px;
  --text-xl:      18px;
  --text-2xl:     21px;
  --text-3xl:     24px;
  --text-4xl:     28px;
  --text-5xl:     36px;
  --text-6xl:     44px;
  --text-display: clamp(38px, 5.4vw, 68px);  /* hero headline */
  --text-stat:    56px;                       /* big serif numerals */

  /* Legacy rem aliases — preserve the original rem scale so the base
     h1–h4 / body rules render byte-identically. New code uses the px
     ramp above; anything that prefers rem reads these. */
  --text-xs-rem:    0.75rem;     /* 12px */
  --text-sm-rem:    0.8125rem;   /* 13px */
  --text-body-rem:  0.9375rem;   /* 15px */
  --text-base-rem:  1rem;        /* 16px */
  --text-md-rem:    1.125rem;    /* 18px */
  --text-lg-rem:    1.375rem;    /* 22px */
  --text-xl-rem:    1.75rem;     /* 28px */
  --text-2xl-rem:   2.25rem;     /* 36px */
  --text-3xl-rem:   3rem;        /* 48px */
  --text-4xl-rem:   4rem;        /* 64px */
  /* --text-body keeps its original 15px (0.9375rem) value: it is the
     site-wide <body> size — changing it is a redesign, not hygiene. */
  --text-body:      var(--text-body-rem);

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  --leading-body:     1.55;
  --leading-heading:  1.18;
  --leading-display:  1.05;
  --tracking-tight:   -0.02em;
  --tracking-normal:   0;
  --tracking-wide:     0.04em;
  --tracking-caps:     0.18em;  /* "C E R T I F Y" register */

  /* ── Spacing tokens (logical) ───────────────────────────────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  28px;   /* 24+4 — card/section rhythm hole */
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;   /* 48+8 — card/section rhythm hole */
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ── Radii ──────────────────────────────────────────────────────── */
  --radius-sm:     3px;    /* pills, chips, inputs */
  --radius:        4px;    /* buttons, cards (default) */
  --radius-lg:     6px;    /* modals, large panels */
  --radius-xl:     10px;   /* marketing/hero cards, stat & commitment tiles */
  --radius-mock:   12px;   /* product mock window frames only */
  --radius-pill:   999px;  /* fully-rounded chips / toggles / badges */
  --radius-circle: 50%;    /* dots, checks, success icon */

  /* ── Elevation ──────────────────────────────────────────────────── */
  --shadow-none:    none;
  --shadow-hairline: 0 0 0 1px var(--border);
  --shadow-card:    0 1px 2px rgba(10, 14, 26, 0.04),
                    0 0 0 1px var(--border);
  --shadow-sticky:  0 -1px 3px rgba(10, 14, 26, 0.06),
                    0 -4px 6px -2px rgba(10, 14, 26, 0.04);
  --shadow-modal:   0 24px 48px -12px rgba(10, 14, 26, 0.18),
                    0 4px 12px -4px rgba(10, 14, 26, 0.08);

  /* ── Motion ─────────────────────────────────────────────────────── */
  /* Primitives — the ONLY allowed durations + the one brand curve.
     Standalone so motion-init.js, keyframes, and transitions share one
     source (see motion-init.js T = {…}, kept in lock-step with these). */
  --ease:        cubic-bezier(0.2, 0, 0.2, 1);
  --dur-instant: 80ms;   /* scroll-progress tracking only (linear) */
  --dur-fast:    100ms;  /* micro state-flip: toggle/press/active swap */
  --dur-base:    150ms;  /* standard hover: color/bg/border/translateY(-2px) */
  --dur-slow:    250ms;  /* larger transitions: pane swap, scaleX, reveal */
  --dur-reveal:  550ms;  /* above-the-fold / scroll entrance, once */

  /* Entrance stagger cascade (delays). */
  --stagger-1: 100ms;
  --stagger-2: 200ms;
  --stagger-3: 320ms;
  --stagger-4: 460ms;
  --stagger-5: 600ms;

  /* Composed bundles — BACK-COMPAT aliases (used site-wide as the
     `transition` shorthand). Now derived from the primitives above. */
  --motion-fast:   var(--dur-fast) var(--ease);
  --motion:        var(--dur-base) var(--ease);
  --motion-slow:   var(--dur-slow) var(--ease);
  --motion-reveal: var(--dur-reveal) var(--ease);

  /* ── Layout rhythm & density ────────────────────────────────────── */
  /* --section-pad is the regular cadence; styles.css reads
     var(--section-pad) (previously a hard 96px fallback). */
  --section-pad:        var(--space-24);  /* 96px — regular */
  --section-pad-tight:  72px;             /* dense sections */
  --section-pad-comfy:  120px;            /* hero / breathing moments */
  --section-gap-header: var(--space-12);  /* 48px — header → first content */
  --section-gap-block:  var(--space-8);   /* 32px — between blocks in a section */

  /* Structural one-offs (kept off the 4/8 scale on purpose: snapping
     these would move the layout >2px — keep the look, name the value). */
  --nav-h:           68px;   /* sticky-nav height */
  --hero-pad-top:    100px;  /* hero is the asymmetric atmospheric moment */
  --hero-pad-bottom: 88px;

  /* Reading measure caps — density rises, lines stay readable */
  --measure-title: 20ch;
  --measure-lede:  56ch;
  --measure-card:  42ch;
  --measure-body:  68ch;

  /* One gutter ramp (replaces ad-hoc 12/14/16/24/64) */
  --gutter-tight: 16px;
  --gutter:       24px;
  --gutter-wide:  48px;

  /* Card padding — 2-step scale (replaces 28/32/36 spread) */
  --card-pad:    24px 24px;
  --card-pad-lg: 28px 28px;

  /* Extra line-height steps the roles need (compose, don't bake px). */
  --leading-none:  1;      /* big numerals / eyebrows */
  --leading-snug:  1.22;   /* serif card titles */
  --leading-tight: 1.12;   /* section titles */
  --leading-flat:  1.4;    /* meta / proof values */
  --leading-list:  1.2;    /* mono proof keys */

  /* ── Type-role map (reading-path hierarchy) ─────────────────────── */
  /* Each role binds weight/size/leading/family so every section reads
     eyebrow → serif title → lede → cards → proof-value. Composed from
     the px ramp + --leading-* + --weight-* — NO baked-in raw px.
     Consumed via the `font:` shorthand; letter-spacing/color alongside.
     (--role-card-title keeps an explicit 19px — the ramp jumps 18→21 and
     19px is the documented card-title size; ≤1px of any ramp step.) */
  --role-eyebrow:    var(--weight-semibold) var(--text-2xs)/var(--leading-none) var(--font-sans);
  --role-title:      var(--weight-semibold) clamp(28px, 3.4vw, 42px)/var(--leading-tight) var(--font-serif);
  --role-lede:       var(--weight-regular) var(--text-xl)/var(--leading-body) var(--font-sans);
  --role-card-title: var(--weight-semibold) 19px/var(--leading-snug) var(--font-serif);
  --role-card-body:  var(--weight-regular) var(--text-base)/var(--leading-body) var(--font-sans);
  --role-proof-k:    var(--weight-semibold) 10px/var(--leading-list) var(--font-mono);
  --role-proof-v:    var(--weight-medium) var(--text-sm)/var(--leading-flat) var(--font-sans);
  --role-meta:       var(--weight-medium) var(--text-xs)/var(--leading-flat) var(--font-sans);
  --role-data-num:   var(--weight-semibold) var(--font-serif);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    /* Zero every duration primitive — the composed --motion-* aliases
       and any direct --dur-* / --motion-reveal use collapse to 0ms. */
    --dur-instant: 0ms;
    --dur-fast:    0ms;
    --dur-base:    0ms;
    --dur-slow:    0ms;
    --dur-reveal:  0ms;
    --stagger-1: 0ms;
    --stagger-2: 0ms;
    --stagger-3: 0ms;
    --stagger-4: 0ms;
    --stagger-5: 0ms;
    --motion-fast:   0ms;
    --motion:        0ms;
    --motion-slow:   0ms;
    --motion-reveal: 0ms;
  }
}

/* ── Base type ───────────────────────────────────────────────────── */
body {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv11"; /* Inter: open digits, alt 'a' */
}

/* Display headings — serif, editorial */
.display, h1.display, .serif {
  font-family: var(--font-serif);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
}

/* Sans headings — product UI */
h1, h2, h3, h4 {
  font-weight: var(--weight-semibold);
  line-height: var(--leading-heading);
  color: var(--ink);
  margin: 0;
  letter-spacing: -0.01em;
}

/* Base headings keep the original rem scale (28/22/18/16px) via the
   legacy aliases — the px ramp reuses these names for components. */
h1 { font-size: var(--text-xl-rem); }
h2 { font-size: var(--text-lg-rem); }
h3 { font-size: var(--text-md-rem); }
h4 { font-size: var(--text-base-rem); font-weight: var(--weight-medium); }

p { margin: 0; }

/* Tracked-caps label register (eyebrow / category / lockup tagline) */
.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--ink-muted);
}

code, pre, kbd, samp {
  font-family: var(--font-mono);
  font-size: 0.92em;
  font-feature-settings: "calt" 0, "liga" 0;
}

a {
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
a:hover { color: var(--brand-hover); }

/* Focus-ring recipe (single source — Agent E consumes this everywhere):
   width var(--focus-ring-width), offset var(--focus-ring-offset),
   color var(--focus-ring) on light / var(--focus-ring-dark) on .dark. */
:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
  border-radius: var(--radius-sm);
}