/* ============================================================
   Design tokens + font faces
   The single source of truth for color, type, spacing.
   Edit here to retheme the entire site.
   ============================================================ */

/* PP Neue Montreal — self-hosted ------------------------------ */

@font-face {
  font-family: "PP Neue Montreal";
  src: url("../fonts/PPNeueMontreal-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "PP Neue Montreal";
  src: url("../fonts/PPNeueMontreal-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "PP Neue Montreal";
  src: url("../fonts/PPNeueMontreal-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "PP Neue Montreal Mono";
  src: url("../fonts/PPNeueMontrealMono-Book.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "PP Neue Montreal Mono";
  src: url("../fonts/PPNeueMontrealMono-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Surfaces ----------------------------------------------- */
  --bg: #ffffff;
  --bg-elevated: #f3f3f1;
  --bg-section: #f6f6f4;
  --bg-card: #fbfbfa;
  --bg-placeholder: #0e0e10;
  --gray: #efefef; /* site-wide neutral gray (ghost button, bento media placeholders) */

  /* Foreground -------------------------------------------- */
  --fg: #0e0e10;
  --fg-pressed: #1c1c1f;
  --fg-secondary: #45464a;
  --fg-muted: #8a8a86;
  --fg-faint: #b8b8b3;

  /* Lines ------------------------------------------------- */
  --border: #e7e5e0;
  --border-strong: #d8d6d0;

  /* Accents (used sparingly) ----------------------------- */
  --accent: rgb(33, 98, 223);
  --accent-soft: #eef0fb;
  --accent-warm: #f4d35e;
  --accent-danger: #e74c3c;

  /* Brand (CTA buttons) --------------------------------- */
  --brand: rgb(33, 98, 223);
  --brand-hover: rgb(25, 78, 190);
  /* Lightened brand for use on dark surfaces (e.g. badge text on
     the active Yearly tab). --brand at low opacity goes muddy on
     near-black; this is the brand hue tinted ~60% toward white so
     it stays legible at AAA contrast. */
  --brand-on-dark: #9ec1f7;

  /* Decor — testimonial backgrounds ---------------------- */
  --lavender-from: #ecedfb;
  --lavender-to: #e2dffb;
  --lime: #d6e83a;

  /* Hero cursor overlay — colors mirror sidebar avatars / canvas highlight */
  --cursor-architect: #2dd4bf;
  --cursor-prompt: #a78bfa;
  --cursor-layout: #facc15;

  /* Quote ink (slightly cooler than --fg) ---------------- */
  --quote-ink: #0a0a0a;
  --quote-ink-rgb: 10 10 10;

  /* RGB triplets — for `rgb(var(--x) / a)` shadow stacks  */
  --shadow-rgb: 15 17 25;
  --brand-rgb: 33 98 223;
  --accent-rgb: 33 98 223;
  --warm-rgb: 244 211 94;
  --white-rgb: 255 255 255;
  --bg-rgb: 255 255 255;

  /* Type ------------------------------------------------- */
  --font-display: "PP Neue Montreal", -apple-system, BlinkMacSystemFont,
    "Segoe UI", system-ui, sans-serif;
  --font-body: "PP Neue Montreal", -apple-system, BlinkMacSystemFont,
    "Segoe UI", system-ui, sans-serif;
  --font-mono: "PP Neue Montreal Mono", ui-monospace, "SF Mono", Menlo, Consolas,
    monospace;

  /* Type scale — three sans tiers (mono captions are exempt) */
  --fs-hero: clamp(36px, 4.4vw, 54px);
  --fs-title: clamp(28px, 3vw, 36px);
  --fs-body: 16px;

  /* Body line-height — consumed by base.css and any cross-element
     vertical math (e.g. the compliance aside top-aligns with the
     heading by skipping past the eyebrow's line-box). */
  --lh-body: 1.6;

  /* Layout ----------------------------------------------- */
  --container: 1248px;
  --gutter: 32px;       /* inside the rails — between rails and content */
  --outer-gutter: 32px; /* outside the rails — between rails and viewport edge (≥768) */

  /* Single source of truth for rail width — used by .container and
     .nav__inner so the page rails and nav row align column-for-column.
     The min() resolves at the use site, where 100% is the parent's width. */
  --rail-width: min(
    calc(100% - (var(--outer-gutter) + var(--outer-gutter))),
    var(--container)
  );

  /* Radii ------------------------------------------------ */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 22px;
  --r-pill: 999px;

  /* Motion ----------------------------------------------- */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --t-fast: 0.15s;
  --t-med: 0.25s;

  /* Footer (dark surface) -------------------------------- */
  --footer-bg: #0c0c0e;        /* matches opus.com bg-uplift-grey-950 */
  --footer-fg: #fbfbfa;        /* matches navbar logo off-white */
  --footer-fg-muted: rgba(255, 255, 255, 0.5);
  --footer-border: rgba(255, 255, 255, 0.3);
  /* The zipline ribbon's stripe colors live baked into images/zipline.svg
     because <img src> SVGs can't read CSS custom properties. If you need
     to retheme the stripes, edit the SVG fills directly: yellow #facc15,
     teal #2dd4bf, purple #a78bfa, blue rgb(33, 98, 223). */

  /* Prose / blog ---------------------------------------------------- */
  --prose-width:         720px;
  --prose-body:          17px;
  --prose-leading:       1.65;
  --prose-paragraph-gap: 1.4em;

  /* Blog cards ------------------------------------------------------ */
  --blog-card-radius:    6px;

  /* Pricing page ---------------------------------------------------- */
  /* Soft blue chip background for the "I need [X] man-hours" readout pill.
     Composed from --brand-rgb at low alpha so it stays in sync if brand
     blue ever changes. */
  --accent-soft-blue: rgb(var(--brand-rgb) / 0.10);
}