/* Vesper design tokens — a precise, dark, product-led SaaS look.
   Fonts: <link href="https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,400..700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet"> */
:root {
  /* Surfaces (darkest → lightest) */
  --bg: #08090A;            /* page */
  --bg-2: #0F1011;          /* panels, app chrome */
  --bg-3: #141516;          /* cards inside panels */
  --bg-4: #1C1D20;          /* hover, inputs, pills */
  --bg-5: #26282C;          /* pressed, selected rows */

  /* Lines */
  --line: rgba(255, 255, 255, .08);     /* default hairline */
  --line-2: rgba(255, 255, 255, .12);   /* stronger, focus */
  --line-3: rgba(255, 255, 255, .05);   /* table rows */

  /* Text */
  --text: #F7F8F8;          /* headings, primary */
  --text-2: #D0D6E0;        /* card titles, strong body */
  --muted: #8A8F98;         /* body copy, nav links */
  --faint: #80858D;         /* captions, labels, disabled */

  /* Brand: one calm accent */
  /* Brand slots — filled per build by palette/palette.py (palette/slots.json). Demo values shown. */
  --mint: #4FD1A5;          /* accent: live states, highlights, links in mockups */
  --mint-rgb: 79, 209, 165; /* the accent as r, g, b for rgba(var(--mint-rgb), .x) */
  --mint-soft: rgba(var(--mint-rgb), .12);
  --mint-deep: #2A8F6D;     /* darker partner in the workspace-logo gradient */
  --tint-1: #E9E4FF;        /* soft quote card gradient, light end */
  --tint-2: #DCEBFF;        /* soft quote card gradient, middle */
  --cta: #E6E6E7;           /* primary pill (near-white) */
  --cta-ink: #08090A;

  /* Data colours (mockups only). Blue/violet/rose are brand slots; red/amber are status and never change. */
  --red: #F2555A;   --red-soft: rgba(242, 85, 90, .12);
  --amber: #F0B45A; --amber-soft: rgba(240, 180, 90, .12);
  --blue: #7AA2FF;  --blue-soft: color-mix(in srgb, var(--blue) 12%, transparent);
  --violet: #B49CFF;--violet-soft: color-mix(in srgb, var(--violet) 12%, transparent);
  --rose: #F59AD3;

  --font: "Inter", "Inter Variable", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: var(--font); /* headings; same Inter by default, set by typography/type.py on a font swap */
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --r-xs: 4px; --r-sm: 6px; --r: 8px; --r-md: 12px; --r-lg: 16px; --r-pill: 9999px;
  --container: 1280px;
  --gutter: 32px;
  --ease: cubic-bezier(.25, .46, .45, .94);
}

/* Type scale (weights 510/590 = Inter's "medium"/"semibold" optical feel) */
h1, h2, h3, .t-display, .t-h2, .t-h3, .statement { font-family: var(--font-display); }
.t-display { font-size: 64px; line-height: 1; letter-spacing: -.022em; font-weight: 510; }
.t-h2      { font-size: 48px; line-height: 1; letter-spacing: -.022em; font-weight: 510; }
.t-h3      { font-size: 20px; line-height: 1.33; letter-spacing: -.012em; font-weight: 590; }
.t-lead    { font-size: 17px; line-height: 1.6; color: var(--muted); }
.t-body    { font-size: 15px; line-height: 1.6; color: var(--muted); }
.t-small   { font-size: 13px; line-height: 1.5; letter-spacing: -.01em; }
.t-mono    { font-family: var(--mono); font-size: 12px; letter-spacing: .02em; }

@media (max-width: 900px) {
  .t-display { font-size: 44px; }
  .t-h2 { font-size: 34px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }
.static *, .static *::before, .static *::after { transition: none !important; animation: none !important; }