/* Hallmark · checked: 2026-10-22 · genre: modern-minimal (inferred)
 * built: the project · redesign: polish · v2.0.0
 * scope: shared UI; existing layout, brand, artwork and content retained.
 * Full legacy gate compliance is not claimed; see .hallmark/review.json. */
/* ==========================================================================
   Vamocles — design tokens
   One accent (crimson #C8102E), two poles (paper / night). Everything else
   is derived. Light is the default; [data-theme="dark"] flips the poles.
   Sections marked .surface-night / .surface-crimson keep their colours in
   both themes.
   ========================================================================== */

:root {
  color-scheme: light;

  /* Brand */
  --crimson: #C8102E;
  --crimson-300: #F2475F;
  --crimson-400: #E0203E;
  --crimson-600: #A60C25;
  --crimson-700: #82091D;
  --crimson-800: #560614;
  --crimson-900: #2A020A;
  --crimson-rgb: 200 16 46;

  /* Night pole (constant in both themes) */
  --night: #050506;
  --night-1: #0B0B0D;
  --night-2: #121215;
  --night-3: #1B1B20;
  --night-ink: #F5F5F7;
  --night-ink-2: #C3C3CA;
  --night-ink-3: #8A8A94;
  --night-line: rgb(255 255 255 / 0.09);

  /* Paper pole (constant in both themes) */
  --white: #FFFFFF;

  /* Theme surfaces — light */
  --paper: #FFFFFF;
  --paper-2: #F5F5F7;
  --paper-3: #EBEBEF;
  --paper-rgb: 255 255 255;
  --ink: #0A0A0C;
  --ink-2: #3B3B42;
  --ink-3: #6B6B74;
  --ink-4: #73737D;   /* faintest text tier: still ≥4.5:1 on paper */
  --ink-rgb: 10 10 12;
  --line: rgb(10 10 12 / 0.08);
  --line-2: rgb(10 10 12 / 0.15);
  --accent-text: #C8102E;          /* 5.9:1 on white */
  --accent-soft: rgb(200 16 46 / 0.08);
  --accent-soft-2: rgb(200 16 46 / 0.14);

  --glass: rgb(255 255 255 / 0.66);
  --glass-strong: rgb(255 255 255 / 0.84);
  --glass-edge: rgb(255 255 255 / 0.75);
  --glass-line: rgb(10 10 12 / 0.08);
  --glass-shadow: 0 1px 0 rgb(255 255 255 / 0.7) inset, 0 10px 40px -12px rgb(10 10 12 / 0.18), 0 2px 6px -2px rgb(10 10 12 / 0.06);

  --card: #F5F5F7;   /* Apple tile grey on white sections */
  --card-2: #F7F7F9;
  --card-line: transparent;
  --card-shadow: none;

  --focus: 0 0 0 3px var(--paper), 0 0 0 5px var(--ink);

  /* Typography — the system face renders SF Pro on Apple devices. No web fonts,
     no third-party requests. */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", "Segoe UI Variable Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-text: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, "JetBrains Mono", "Cascadia Code", Menlo, Consolas, monospace;

  --fs-mega: clamp(3.5rem, 0.6rem + 11vw, 12rem);
  --fs-hero: clamp(2.75rem, 1rem + 5.4vw, 6.5rem);
  --fs-display: clamp(2.3rem, 1.1rem + 3.4vw, 4.4rem);
  --fs-h1: clamp(2.1rem, 1.1rem + 2.8vw, 3.8rem);
  --fs-h2: clamp(1.75rem, 1.1rem + 1.8vw, 2.8rem);
  --fs-h3: clamp(1.35rem, 1.05rem + 0.9vw, 1.9rem);
  --fs-h4: clamp(1.1rem, 1rem + 0.35vw, 1.3rem);
  --fs-lead: clamp(1.08rem, 1rem + 0.3vw, 1.28rem);
  --fs-body: 1.0625rem;
  --fs-small: 0.9375rem;
  --fs-micro: 0.8125rem;
  --fs-nano: 0.75rem;

  /* Marketing labels use the reading face; mono stays for technical data. */
  --font-label: var(--font-text);
  --fs-label: var(--fs-micro);
  --fs-badge: 0.75rem;
  --tracking-label: 0;
  --lh-label: 1.4;

  --lh-tight: 1.02;
  --lh-snug: 1.08;
  --lh-head: 1.14;
  --lh-body: 1.55;
  --lh-lead: 1.5;
  --lh-control: 1.25;

  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-heading: 650;
  --weight-display: 700;

  --tracking-mega: -0.045em;
  --tracking-display: -0.032em;
  --tracking-head: -0.022em;
  --tracking-body: -0.011em;
  --tracking-caps: 0.14em;

  /* Space */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;
  --section-y: clamp(80px, 10vw, 160px);
  --section-y-sm: clamp(48px, 6vw, 96px);
  --space-label: 16px;
  --space-copy: clamp(20px, 2vw, 24px);
  --space-actions: clamp(28px, 3vw, 40px);
  --space-section-head: clamp(32px, 5vw, 64px);
  --gutter: clamp(16px, 4.2vw, 56px);
  --container: 1240px;
  --container-wide: 1480px;
  --container-text: 720px;

  /* Controls share a type size and a minimum target; labels may wrap. */
  --control-h-sm: 44px;
  --control-h: 48px;
  --control-h-lg: 56px;
  --control-text: 1rem;
  --control-text-sm: 0.875rem;

  /* Shape */
  --r-tag: 4px;   /* boxed labels: maturity tags, chips, severity marks */
  --r-xs: 8px;    /* controls */
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 26px;
  --r-xl: 36px;
  --r-2xl: 48px;
  --r-pill: 999px;

  /* Motion — one calm system (see MOTION-SPEC): entrances ease out, exits are
     shorter and soft, nothing overshoots. --ease-spring is kept as a name only. */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);      /* every entrance, morph and press release */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);  /* continuous or scroll-linked motion only */
  --ease-spring: var(--ease-out);
  --ease-soft: cubic-bezier(0.25, 0.1, 0.25, 1);  /* opacity, colour and every exit */
  --t-press: 90ms;     /* press-in on controls, cards, rating tiles */
  --t-fast: 180ms;     /* colour, border, background, focus halo, selection */
  --t-exit: 200ms;     /* anything leaving: menu, sheet, dialog */
  --t-ui: 280ms;       /* surfaces: mega morph, accordions, sheet rows, step and view changes */
  --t-med: 380ms;      /* reserved for product visuals */
  --t-enter: 600ms;    /* one-off entries: hero entry, section reveal */
  --t-slow: 720ms;     /* reserved for product visuals */
  --t-reveal: 1100ms;  /* retired; kept so older transition lists stay valid */
  --stagger: 60ms;     /* at most 4 steps */

  /* Header */
  --header-h: 72px;
  --header-h-compact: 58px;
  --header-top: 0px;
  --header-top-compact: 12px;
  --header-max: 1120px;

  /* Layers */
  --z-base: 1;
  --z-raise: 10;
  --z-sticky: 50;
  --z-header: 100;
  --z-menu: 110;
  --z-toast: 200;
}

/* -------------------------------------------------------------------------
   Dark theme — paper and ink trade places. Night sections stay night.
   ------------------------------------------------------------------------- */
:root[data-theme="dark"] {
  color-scheme: dark;

  --paper: #050506;
  --paper-2: #0C0C0F;
  --paper-3: #16161B;
  --paper-rgb: 5 5 6;
  --ink: #F5F5F7;
  --ink-2: #C9C9D0;
  --ink-3: #8E8E98;
  --ink-4: #7E7E88;   /* ≥4.5:1 on night */
  --ink-rgb: 245 245 247;
  --line: rgb(255 255 255 / 0.08);
  --line-2: rgb(255 255 255 / 0.15);
  --accent-text: #FF4863;          /* 6:1 on night */
  --accent-soft: rgb(255 72 99 / 0.1);
  --accent-soft-2: rgb(255 72 99 / 0.17);

  --glass: rgb(16 16 20 / 0.62);
  --glass-strong: rgb(16 16 20 / 0.82);
  --glass-edge: rgb(255 255 255 / 0.1);
  --glass-line: rgb(255 255 255 / 0.09);
  --glass-shadow: 0 1px 0 rgb(255 255 255 / 0.06) inset, 0 12px 44px -12px rgb(0 0 0 / 0.7), 0 2px 6px -2px rgb(0 0 0 / 0.5);

  --card: #141416;   /* graphite tile on night */
  --card-2: #1A1A1D;
  --card-line: rgb(255 255 255 / 0.06);
  --card-shadow: none;

  --focus: 0 0 0 3px var(--paper), 0 0 0 5px var(--ink);
}

/* Always-night surface (both themes) */
.surface-night {
  --paper: var(--night);
  --paper-2: var(--night-1);
  --paper-3: var(--night-2);
  --paper-rgb: 5 5 6;
  --ink: var(--night-ink);
  --ink-2: var(--night-ink-2);
  --ink-3: var(--night-ink-3);
  --ink-4: #7E7E88;
  --ink-rgb: 245 245 247;
  --line: var(--night-line);
  --line-2: rgb(255 255 255 / 0.16);
  --accent-text: #FF4863;
  --accent-soft: rgb(255 72 99 / 0.1);
  --accent-soft-2: rgb(255 72 99 / 0.17);
  --card: #0E0E11;
  --card-2: #131317;
  --card-line: rgb(255 255 255 / 0.07);
  --card-shadow: 0 1px 0 rgb(255 255 255 / 0.04) inset, 0 20px 40px -24px rgb(0 0 0 / 0.8);
  --glass: rgb(16 16 20 / 0.62);
  --glass-strong: rgb(16 16 20 / 0.82);
  --glass-edge: rgb(255 255 255 / 0.1);
  --glass-line: rgb(255 255 255 / 0.09);
  --focus: 0 0 0 3px var(--night), 0 0 0 5px var(--night-ink);
  color-scheme: dark;
  background: var(--paper);
  color: var(--ink);
}

/* Always-crimson surface (both themes) */
.surface-crimson {
  --paper: var(--crimson);
  --paper-2: var(--crimson-600);
  --paper-3: var(--crimson-700);
  --paper-rgb: 200 16 46;
  --ink: #FFFFFF;
  --ink-2: rgb(255 255 255 / 0.86);
  --ink-3: rgb(255 255 255 / 0.7);
  --ink-4: rgb(255 255 255 / 0.5);
  --ink-rgb: 255 255 255;
  --line: rgb(255 255 255 / 0.18);
  --line-2: rgb(255 255 255 / 0.3);
  --accent-text: #FFFFFF;
  --accent-soft: rgb(255 255 255 / 0.12);
  --accent-soft-2: rgb(255 255 255 / 0.2);
  --card: rgb(255 255 255 / 0.08);
  --card-2: rgb(255 255 255 / 0.12);
  --card-line: rgb(255 255 255 / 0.16);
  --glass: rgb(120 6 26 / 0.45);
  --glass-strong: rgb(120 6 26 / 0.7);
  --glass-edge: rgb(255 255 255 / 0.2);
  --glass-line: rgb(255 255 255 / 0.2);
  --focus: 0 0 0 3px var(--crimson), 0 0 0 5px #FFFFFF;
  color-scheme: dark;
  background: var(--paper);
  color: var(--ink);
}

/* Always-paper surface (both themes) — rare; used for the hero cutout in light */
.surface-paper {
  --paper: #FFFFFF;
  --paper-2: #F5F5F7;
  --ink: #0A0A0C;
  --ink-2: #3B3B42;
  --ink-3: #6B6B74;
  --line: rgb(10 10 12 / 0.08);
  --accent-text: #C8102E;
  color-scheme: light;
  background: var(--paper);
  color: var(--ink);
}