/* Compass — Design Tokens
   Modern fintech / Linear-Stripe energy. Refined neutrals, hairline borders,
   one confident accent, editorial type for marquee numbers. */
@font-face {
  font-family: "Cards";
  src: url("/handoff/fonts/cards-normal-regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Cards";
  src: url("/handoff/fonts/cards-normal-medium.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Cards";
  src: url("/handoff/fonts/cards-normal-bold.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Cards";
  src: url("/handoff/fonts/cards-normal-semibold.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Cards";
  src: url("/handoff/fonts/cards-normal-black.woff2") format("woff2");
  font-style: normal;
  font-weight: 900;
  font-display: swap;
}
@font-face {
  font-family: "PP Editorial New";
  src: url("/handoff/fonts/PPEditorialNew-Regular.otf") format("opentype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "PP Editorial New";
  src: url("/handoff/fonts/PPEditorialNew-Italic.otf") format("opentype");
  font-style: italic;
  font-weight: 400;
  font-display: swap;
}
/* Peak XV brand headline pairing: Ultralight upright + Old Italic. */
@font-face {
  font-family: "PP Editorial New";
  src: url("/handoff/fonts/PPEditorialNew-Ultralight.woff2") format("woff2");
  font-style: normal;
  font-weight: 200;
  font-display: swap;
}
@font-face {
  font-family: "PP Editorial Old";
  src: url("/handoff/fonts/PPEditorialOld-Italic.woff2") format("woff2");
  font-style: italic;
  font-weight: 400;
  font-display: swap;
}

:root {
  /* Surfaces — paper-warm, never pure white. Peak XV paper + stone. */
  --paper: #FAF9F6;
  --surface: #FFFFFF;
  --surface-2: #F1EFEA;
  --surface-3: #E8E5E0;
  /* Peak XV navy is the canonical ink; near-black still used in deep accents. */
  --ink: #000033;
  --ink-2: #030013;
  --ink-soft: #3D2F83;
  --ink-mute: #51636C;
  --ink-fade: #93B9BF;
  --hairline: rgba(0, 0, 51, 0.10);
  --hairline-strong: rgba(0, 0, 51, 0.18);

  /* Peak XV violet — the one confident accent. */
  --accent: #8039FF;
  --accent-ink: #552BAC;
  --accent-soft: #EDE5FF;
  --accent-glow: rgba(128, 57, 255, 0.14);
  /* Warm complement used for occasional emphasis (sparingly). */
  --accent-warm: #FF6A45;
  --accent-warm-soft: #FFB061;

  /* Functional palette — sparingly used */
  --pos: #0E8A4A;
  --pos-soft: #E3F4EA;
  --warn: #B8730E;
  --warn-soft: #FBF1DC;
  --neg: #C42B2B;
  --neg-soft: #FBE7E7;

  /* Heatmap ramp — Peak XV violet/lavender progression. */
  --heat-0: #F1EFEA;
  --heat-1: #D1EDFF;
  --heat-2: #91BCE7;
  --heat-3: #BD97FF;
  --heat-4: #552BAC;
  --heat-5: #8039FF;

  /* Type — Peak XV brand. Cards / PP Editorial are primary;
     Instrument Sans / Instrument Serif are the brand-guide Google
     fallbacks (load via Google Fonts in index.html). */
  --font-sans: "Cards", "Instrument Sans", -apple-system, system-ui, sans-serif;
  --font-serif: "PP Editorial New", "Instrument Serif", "Cards", "Instrument Sans", -apple-system, system-ui, sans-serif;
  --font-mono: "SF Mono", ui-monospace, "Menlo", "Monaco", monospace;

  /* Figma Type Scale */
  --h1-size: 48px; --h1-line: 60px; --h1-weight: 400; --h1-track: -0.5px;
  --h2-size: 48px; --h2-line: 56px; --h2-weight: 500; --h2-track: -0.5px;
  --h3-size: 32px; --h3-line: 48px; --h3-weight: 500; --h3-track: 0px;
  --h4-size: 20px; --h4-line: 34px; --h4-weight: 700; --h4-track: 0.5px;
  --h5-size: 16px; --h5-line: 24px; --h5-weight: 700; --h5-track: 0.25px;
  --h6-size: 12px; --h6-line: 20px; --h6-weight: 700; --h6-track: 0.25px;
  --h7-size: 12px; --h7-line: 16px; --h7-weight: 700; --h7-track: 0px;

  --title-1-size: 16px; --title-1-line: 24px; --title-1-weight: 500;
  --title-2-size: 12px; --title-2-line: 20px; --title-2-weight: 500;
  --subtitle-reg-size: 16px; --subtitle-reg-line: 24px; --subtitle-reg-weight: 500;
  --subtitle-sm-size: 14px; --subtitle-sm-line: 20px; --subtitle-sm-weight: 500;
  --subtitle-xs-size: 12px; --subtitle-xs-line: 18px; --subtitle-xs-weight: 500;

  --body-lg-size: 16px; --body-lg-line: 24px; --body-lg-weight: 400;
  --body-md-size: 16px; --body-md-line: 24px; --body-md-weight: 400;
  --body-sm-size: 14px; --body-sm-line: 20px; --body-sm-weight: 400;
  --body-xs-size: 12px; --body-xs-line: 18px; --body-xs-weight: 400;
  --body-2xs-size: 10px; --body-2xs-line: 15px; --body-2xs-weight: 400;

  --caption-size: 12px; --caption-line: 20px; --caption-weight: 700;
  --overline-size: 10px; --overline-line: 15px; --overline-weight: 500;

  --action-reg-size: 16px; --action-reg-line: 24px; --action-reg-weight: 500; --action-track: 0.75px;
  --action-md-size: 14px; --action-md-line: 21px; --action-md-weight: 500;
  --action-sm-size: 12px; --action-sm-line: 14px; --action-sm-weight: 500;

  /* Radii — restrained */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;

  /* Shadows — almost imperceptible, tinted with Peak XV navy. */
  --shadow-sm: 0 1px 2px rgba(0, 0, 51, 0.05);
  --shadow-md: 0 1px 2px rgba(0, 0, 51, 0.05), 0 8px 24px rgba(0, 0, 51, 0.05);
  --shadow-lg: 0 1px 2px rgba(0, 0, 51, 0.05), 0 24px 48px rgba(0, 0, 51, 0.10);
  --shadow-pop: 0 1px 0 rgba(0,0,51,0.05), 0 2px 6px rgba(0,0,51,0.07), 0 16px 40px rgba(0,0,51,0.10);

  /* Density */
  --pad-card: 28px;
  --pad-cell: 14px 16px;
  --gap-sm: 8px;
  --gap-md: 14px;
  --gap-lg: 24px;
  --gap-xl: 40px;
}

[data-theme="dark"] {
  --paper: #030013;
  --surface: #0E0830;
  --surface-2: #1A1448;
  --surface-3: #2A2360;
  --ink: #FAF9F6;
  --ink-2: #E8E5E0;
  --ink-soft: #BD97FF;
  --ink-mute: #93B9BF;
  --ink-fade: #51636C;
  --hairline: rgba(255, 255, 255, 0.08);
  --hairline-strong: rgba(255, 255, 255, 0.16);
  --accent: #BD97FF;
  --accent-ink: #D8C5FF;
  --accent-soft: rgba(189, 151, 255, 0.16);
  --accent-glow: rgba(189, 151, 255, 0.24);
  --heat-0: #1A1448;
  --heat-1: #2A2360;
  --heat-2: #3D2F83;
  --heat-3: #552BAC;
  --heat-4: #8039FF;
  --heat-5: #BD97FF;
  --pos-soft: rgba(14,138,74,0.18);
  --warn-soft: rgba(184,115,14,0.18);
  --neg-soft: rgba(196,43,43,0.18);
}

[data-density="compact"] {
  --pad-card: 20px;
  --pad-cell: 10px 14px;
  --gap-md: 10px;
  --gap-lg: 18px;
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; color: inherit; }

/* Reusable atoms */
.eyebrow {
  font-size: var(--overline-size);
  line-height: var(--overline-line);
  font-weight: var(--overline-weight);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
/* .serif = the brand italic-accent pattern. Uses PP Editorial Old Italic
   per Peak XV brand guide pairing (Ultralight upright + Old Italic). */
.serif { font-family: "PP Editorial Old", var(--font-serif); font-style: italic; font-weight: 400; letter-spacing: -0.01em; }
.accent-italic { color: var(--accent); }
.mono { font-family: var(--font-mono); font-feature-settings: "tnum"; }
.tnum { font-variant-numeric: tabular-nums; }

.t-h3 { font-size: var(--h3-size); line-height: var(--h3-line); font-weight: var(--h3-weight); letter-spacing: var(--h3-track); }
.t-h4 { font-size: var(--h4-size); line-height: var(--h4-line); font-weight: var(--h4-weight); letter-spacing: var(--h4-track); }
.t-h5 { font-size: var(--h5-size); line-height: var(--h5-line); font-weight: var(--h5-weight); letter-spacing: var(--h5-track); }
.t-title-1 { font-size: var(--title-1-size); line-height: var(--title-1-line); font-weight: var(--title-1-weight); }
.t-title-2 { font-size: var(--title-2-size); line-height: var(--title-2-line); font-weight: var(--title-2-weight); }
.t-subtitle-sm { font-size: var(--subtitle-sm-size); line-height: var(--subtitle-sm-line); font-weight: var(--subtitle-sm-weight); }
.t-subtitle-xs { font-size: var(--subtitle-xs-size); line-height: var(--subtitle-xs-line); font-weight: var(--subtitle-xs-weight); }
.t-body-lg { font-size: var(--body-lg-size); line-height: var(--body-lg-line); font-weight: var(--body-lg-weight); }
.t-body-sm { font-size: var(--body-sm-size); line-height: var(--body-sm-line); font-weight: var(--body-sm-weight); }
.t-body-xs { font-size: var(--body-xs-size); line-height: var(--body-xs-line); font-weight: var(--body-xs-weight); }
.t-body-2xs { font-size: var(--body-2xs-size); line-height: var(--body-2xs-line); font-weight: var(--body-2xs-weight); }
.t-caption { font-size: var(--caption-size); line-height: var(--caption-line); font-weight: var(--caption-weight); }
.t-display-lg { font-size: 44px; line-height: 1.05; letter-spacing: -0.025em; }
.t-display-md { font-size: 36px; line-height: 1.1; letter-spacing: -0.02em; }
.t-display-sm { font-size: 32px; line-height: 1; letter-spacing: -0.02em; }
.t-display-xs { font-size: 28px; line-height: 1.1; letter-spacing: -0.02em; }
.t-display-2xs { font-size: 24px; line-height: 1.1; letter-spacing: -0.02em; }
.t-display-suffix { font-size: 18px; color: var(--ink-mute); }
.t-action-md { font-size: var(--action-md-size); line-height: var(--action-md-line); font-weight: var(--action-md-weight); letter-spacing: var(--action-track); text-transform: uppercase; }

.hairline { border: 1px solid var(--hairline); }
.hairline-b { border-bottom: 1px solid var(--hairline); }
.hairline-t { border-top: 1px solid var(--hairline); }
.hairline-r { border-right: 1px solid var(--hairline); }

.card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
}

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid var(--hairline-strong);
  background: var(--surface);
  color: var(--ink);
  font-size: var(--action-sm-size); font-weight: var(--action-sm-weight);
  line-height: var(--action-sm-line);
  letter-spacing: var(--action-track);
  text-transform: uppercase;
  transition: all 120ms ease;
}
.btn:hover { background: var(--surface-2); }
.btn-primary {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.btn-primary:hover { background: var(--ink-2); }
.btn-accent {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}
.btn-accent:hover { background: var(--accent-ink); }
.btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--ink-soft);
}
.btn-ghost:hover { background: var(--surface-2); color: var(--ink); }
.btn-sm { padding: 6px 12px; font-size: var(--body-2xs-size); line-height: var(--body-2xs-line); }
.btn-lg { padding: 14px 22px; font-size: var(--action-md-size); line-height: var(--action-md-line); }

/* Inputs */
.input, .select, .textarea {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-md);
  padding: 11px 14px;
  font-size: 14px;
  color: var(--ink);
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-glow);
}
.field { display: flex; flex-direction: column; gap: 6px; }
.field-label {
  font-size: var(--overline-size);
  line-height: var(--overline-line);
  font-weight: var(--overline-weight);
  letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-mute);
}

/* Pills / chips */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--hairline-strong);
  background: var(--surface);
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-soft);
}
.chip-accent { background: var(--accent-soft); border-color: transparent; color: var(--accent-ink); }
.chip-pos { background: var(--pos-soft); border-color: transparent; color: var(--pos); }
.chip-warn { background: var(--warn-soft); border-color: transparent; color: var(--warn); }

.dot { width: 6px; height: 6px; border-radius: 999px; background: currentColor; }

/* Segmented */
.seg {
  display: inline-flex;
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
}
.seg button {
  padding: 6px 14px;
  border-radius: 999px;
  border: none;
  background: transparent;
  color: var(--ink-mute);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: -0.01em;
  transition: all 120ms ease;
}
.seg button.on {
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}

/* Animations */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.fade-up { animation: fadeUp 320ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.fade-in { animation: fadeIn 240ms ease both; }

/* Scrollbars — barely there */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--hairline-strong);
  border-radius: 999px;
  border: 2px solid var(--paper);
}
::-webkit-scrollbar-thumb:hover { background: var(--ink-fade); }

/* Mobile niceties — prevent iOS input zoom, reduce tap delay, safer wrapping */
html, body { max-width: 100vw; overflow-x: hidden; }
@media (max-width: 640px) {
  .input, .select, .textarea { font-size: 16px; }
  .btn, .btn-sm { padding: 12px 16px; }
  .btn-sm { font-size: var(--body-xs-size); line-height: var(--body-xs-line); }
  .seg button { padding: 10px 14px; font-size: 13px; }
  body { overflow-wrap: break-word; }
}
button, a { touch-action: manipulation; }

/* Grain texture overlay for warmth */
.grain::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.04 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.5;
  z-index: 9999;
  mix-blend-mode: multiply;
}