/* Polaris Interactive — design-system tokens, assembled from design-system/tokens/.
   Do not hand-edit below the @font-face block; regenerate from the DS instead.
   Two sanctioned edits: (1) the Google Fonts @import is replaced by self-hosted @font-face;
   (2) the --text-muted/--text-faint aliases diverge from the DS for WCAG AA contrast
   (see comments at those lines). */
@font-face{font-family:"Playfair Display";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/playfair-display-400.woff2") format("woff2")}
@font-face{font-family:"Playfair Display";font-style:italic;font-weight:400;font-display:swap;src:url("../fonts/playfair-display-400italic.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/inter-400.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/inter-500.woff2") format("woff2")}
@font-face{font-family:"Geist Mono";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/geist-mono-400.woff2") format("woff2")}
/* Polaris Interactive — colour.
   Neutrals are sampled from the Polaris compass mark (graphite ring → silver star).
   Accents are the brand's own; the mark supplies no colour beyond grey. */
:root {
  /* Graphite / ink — from the mark's outer ring */
  --graphite-950: #0C0F12;
  --graphite-900: #14181C;
  --graphite-800: #1E242A;
  --graphite-700: #2B3238;
  --graphite-600: #3D454C;

  /* Steel / silver — from the mark's star facets */
  --steel-500: #6E777F;
  --steel-400: #8B949C;
  --steel-300: #B4BCC3;
  --steel-200: #D3D9DE;
  --steel-100: #E6EAED;

  /* Paper — warm off-white ground, never pure white for large fields */
  --paper-100: #F7F6F3;
  --paper-050: #FBFAF8;
  --white: #FFFFFF;

  /* North — the primary accent. One saturated blue, used sparingly. */
  --north-700: #1B3FC4;
  --north-600: #2450E8;
  --north-500: #2E5BFF;
  --north-400: #6E8DFF;
  --north-100: #E4EAFF;

  /* Aurora / Solar / Flare — semantic only, never decorative */
  --aurora-600: #00907F;
  --aurora-500: #00B3A4;
  --aurora-100: #D8F5F1;
  --solar-600: #C97F16;
  --solar-500: #F0A93B;
  --solar-100: #FDF0DA;
  --flare-600: #C33F36;
  --flare-500: #E4544A;
  --flare-100: #FCE5E3;

  /* ---- Semantic aliases: use these in components ---- */
  --text-strong: var(--graphite-900);
  --text-body: var(--graphite-700);
  /* DIVERGES from design-system/tokens/colors.css (steel-500/steel-400), deliberately:
     steel-500 is 4.2:1 and steel-400 2.9:1 on paper — both fail WCAG AA 4.5:1 at the
     sizes this site uses. Repointed to graphite-600 (9.0:1). Owner-approved 2026-08-01.
     Any re-sync from the DS must re-apply this or fix the DS aliases upstream. */
  --text-muted: var(--graphite-600);
  --text-faint: var(--graphite-600);
  --text-inverse: var(--paper-050);
  --text-link: var(--north-600);
  --text-link-hover: var(--north-700);

  --surface-page: var(--paper-100);
  --surface-card: var(--white);
  --surface-sunken: var(--steel-100);
  --surface-inverse: var(--graphite-900);
  --surface-inverse-raised: var(--graphite-800);
  --surface-accent-soft: var(--north-100);

  --border-hairline: rgba(20, 24, 28, 0.08);
  --border-subtle: rgba(20, 24, 28, 0.13);
  --border-strong: rgba(20, 24, 28, 0.24);
  --border-inverse: rgba(255, 255, 255, 0.12);
  --border-focus: var(--north-500);

  --action-primary: var(--graphite-900);
  --action-primary-hover: var(--graphite-800);
  --action-primary-press: var(--graphite-950);
  --action-accent: var(--north-500);
  --action-accent-hover: var(--north-600);
  --action-accent-press: var(--north-700);

  --status-success: var(--aurora-500);
  --status-warning: var(--solar-500);
  --status-danger: var(--flare-500);
  --status-info: var(--north-500);

  /* Signature gradients — silver sheen (from the mark) and night sky */
  --sheen-silver: linear-gradient(148deg, #FFFFFF 0%, #D3D9DE 38%, #8B949C 62%, #E6EAED 100%); /* @kind color */
  --sheen-night: linear-gradient(180deg, #1E242A 0%, #0C0F12 100%); /* @kind color */
  --scrim-bottom: linear-gradient(180deg, rgba(12, 15, 18, 0) 0%, rgba(12, 15, 18, 0.72) 100%); /* @kind color */
}

/* Night scope — apply to any subtree that sits on graphite */
.polaris-night {
  --text-strong: var(--paper-050);
  --text-body: var(--steel-200);
  --text-muted: var(--steel-400);
  /* DIVERGES from DS (steel-500): 3.4:1 on night gradient fails AA. Owner-approved 2026-08-01. */
  --text-faint: var(--steel-400);
  --text-inverse: var(--graphite-900);
  --text-link: var(--north-400);
  --text-link-hover: var(--white);
  --surface-page: var(--graphite-900);
  --surface-card: var(--graphite-800);
  --surface-sunken: var(--graphite-950);
  --surface-inverse: var(--paper-050);
  --surface-accent-soft: rgba(46, 91, 255, 0.16);
  --border-hairline: rgba(255, 255, 255, 0.08);
  --border-subtle: rgba(255, 255, 255, 0.14);
  --border-strong: rgba(255, 255, 255, 0.26);
  --action-primary: var(--paper-050);
  --action-primary-hover: var(--white);
  --action-primary-press: var(--steel-200);
}
/* Polaris Interactive — typography.
   Pairing confirmed by the brand owner:
   hero display  Playfair Display · 82 · 400 · ls 0    · lh 0.94
   headings      Inter            · 46 · 400 · ls -.02 · lh 1.1
   lead          Inter            · 19 · 400 · ls -.01 · lh 1.5
   body          Inter            · 16 · 400 · ls 0    · lh 1.6
   interface     Inter            · 14 · 400 · ls 0    · lh 1.5
   caption       Inter            · 13 · 400 · ls .01  · lh 1.5
   eyebrow       Inter        · 10–12 · 400 · UPPER    · ls .16em
   Mono remains Geist Mono for numbers/metrics. */

:root {
  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-heading: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-text: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --fw-light: 300; /* @kind font */
  --fw-regular: 400; /* @kind font */
  --fw-medium: 500; /* @kind font */
  --fw-semibold: 600; /* @kind font */
  --fw-bold: 700; /* @kind font */

  /* Display — Playfair Display, Regular only. Hero statements. */
  --text-display-1: 82px;
  --text-display-2: 58px;
  --text-display-3: 44px;
  --lh-display: 0.94; /* @kind other */
  --ls-display: 0; /* @kind other */

  /* Headings — Inter Regular */
  --text-h1: 46px;
  --text-h2: 32px;
  --text-h3: 24px;
  --text-h4: 18px;
  --lh-heading: 1.1; /* @kind other */
  --ls-heading: -0.02em; /* @kind other */

  /* Lead paragraph */
  --text-lg: 19px;
  --lh-lead: 1.5; /* @kind other */
  --ls-lead: -0.01em; /* @kind other */

  /* Body */
  --text-md: 16px;
  --lh-body: 1.6; /* @kind other */
  --lh-body-tight: 1.4; /* @kind other */
  --ls-body: 0; /* @kind other */

  /* Interface */
  --text-sm: 14px;
  --lh-ui: 1.5; /* @kind other */

  /* Caption */
  --text-xs: 13px;
  --ls-caption: 0.01em; /* @kind other */

  /* Eyebrow / label — the only place uppercase is allowed */
  --text-label: 11px;
  --ls-label: 0.16em; /* @kind other */
  --lh-label: 1; /* @kind other */

  --text-mono: 13px;
  --ls-mono: -0.01em; /* @kind other */
}
/* Polaris Interactive — spacing. 4px base, but 5/10/14 exist because the
   button and field metrics need them; do not snap those to the grid. */
:root {
  --space-0: 0;
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 6px;
  --space-4: 8px;
  --space-5: 10px;
  --space-6: 12px;
  --space-7: 14px;
  --space-8: 16px;
  --space-10: 20px;
  --space-12: 24px;
  --space-14: 28px;
  --space-16: 32px;
  --space-20: 40px;
  --space-24: 48px;
  --space-32: 64px;
  --space-40: 80px;
  --space-48: 96px;
  --space-56: 112px;
  --space-64: 128px;

  /* Layout */
  --gutter: var(--space-12);
  --container-max: 1180px;
  --container-narrow: 720px;
  --container-prose: 620px;
  --section-y: var(--space-56);
  --section-y-lg: 160px;
  --hit-min: 44px;
}
/* Polaris Interactive — radii. Soft, generous, never sharp; pills for actions. */
:root {
  --radius-xs: 5px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 26px;
  --radius-2xl: 34px;
  --radius-pill: 999px;
  --radius-field: 11px;
  --radius-card: var(--radius-lg);
  --radius-sheet: var(--radius-2xl);
  --radius-phone: 46px;
}
/* Polaris Interactive — elevation. Shadows are cool-grey and low-opacity;
   every raised surface also carries a 1px hairline. Inner highlight on dark. */
:root {
  --shadow-hairline: 0 0 0 1px var(--border-hairline);
  --shadow-1: 0 1px 2px rgba(20, 24, 28, 0.05), 0 0 0 1px rgba(20, 24, 28, 0.05);
  --shadow-2: 0 2px 6px rgba(20, 24, 28, 0.06), 0 0 0 1px rgba(20, 24, 28, 0.06);
  --shadow-3: 0 8px 24px -6px rgba(20, 24, 28, 0.12), 0 0 0 1px rgba(20, 24, 28, 0.06);
  --shadow-4: 0 24px 60px -16px rgba(20, 24, 28, 0.22), 0 0 0 1px rgba(20, 24, 28, 0.07);
  --shadow-key: 0 1px 0 rgba(255, 255, 255, 0.14) inset, 0 1px 2px rgba(12, 15, 18, 0.3);
  --shadow-focus: 0 0 0 3px rgba(46, 91, 255, 0.28);
  --shadow-inset-well: inset 0 1px 2px rgba(20, 24, 28, 0.07);
  --blur-glass: saturate(1.4) blur(18px); /* @kind other */
}
/* Polaris Interactive — motion. Short, eased, never bouncy. Nothing above 420ms. */
:root {
  --dur-instant: 90ms; /* @kind other */
  --dur-fast: 150ms; /* @kind other */
  --dur-base: 220ms; /* @kind other */
  --dur-slow: 320ms; /* @kind other */
  --dur-reveal: 420ms; /* @kind other */
  --ease-standard: cubic-bezier(0.2, 0.7, 0.2, 1); /* @kind other */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --ease-in: cubic-bezier(0.5, 0, 0.75, 0); /* @kind other */
  --press-scale: 0.985; /* @kind other */
  --reveal-y: 14px;
}
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-instant: 0ms; /* @kind other */
    --dur-fast: 0ms; /* @kind other */
    --dur-base: 0ms; /* @kind other */
    --dur-slow: 0ms; /* @kind other */
    --dur-reveal: 0ms; /* @kind other */
    --reveal-y: 0px;
    --press-scale: 1; /* @kind other */
  }
}
/* Polaris Interactive — minimal element defaults. */
*, *::before, *::after { box-sizing: border-box }
body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-body);
  font-family: var(--font-text);
  font-size: var(--text-md);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}
h1 { color: var(--text-strong); font-family: var(--font-display); line-height: var(--lh-display); letter-spacing: var(--ls-display); font-weight: var(--fw-regular); margin: 0 }
h2, h3, h4 { color: var(--text-strong); font-family: var(--font-heading); line-height: var(--lh-heading); letter-spacing: var(--ls-heading); font-weight: var(--fw-regular); margin: 0 }
p { margin: 0 }
a { color: var(--text-link); text-decoration: none; transition: color var(--dur-fast) var(--ease-standard) }
a:hover { color: var(--text-link-hover) }
code, kbd, pre { font-family: var(--font-mono); font-size: var(--text-mono) }
::selection { background: var(--north-100); color: var(--graphite-900) }
:focus-visible { outline: none; box-shadow: var(--shadow-focus) }