@import url("https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500;600&display=swap");

/* typography only — grounds belong to each page */
body{font-family:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}
h1,h2,h3,.section-title,.plan-name{font-family:"Instrument Serif",Georgia,serif;font-weight:400;letter-spacing:-.015em}
code,pre,kbd,.section-label,.kick,.eyebrow{font-family:"JetBrains Mono",ui-monospace,Menlo,monospace}
.section-label,.kick,.eyebrow{letter-spacing:.14em;text-transform:uppercase}

/* ===================================================================
   Island dusk — the shared skin.
   brand.css still ships the old charcoal/green theme and applies a lot of
   it with !important from inside an @layer, so this file is loaded AFTER it
   and pins the tokens the rest of the site now uses. Scope is deliberately
   narrow: page ground, type colour, nav, primary CTA, links. Layout on each
   page is left alone.
   =================================================================== */

:root,
:root[data-theme],
html[data-theme] {
  --bg: #0a0820;
  --ink: #f7f1e6;
  --dim: #b9b2ce;
  --dimmer: #7e779a;
  --cream: #f7f1e6;
  --onCream: #181231;
  --coral: #ff6f61;
  --coral2: #ff9188;
  --magenta: #ff4d9d;
  --violet: #9b6bff;
  --amber: #ffc14d;
  --teal: #3fe0cc;
  --line: rgba(247, 242, 234, 0.12);
}


/* the spectrum hairline that runs under the nav on every page */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 999;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    #ff6f61,
    #ff4d9d,
    #9b6bff,
    #3fe0cc,
    #ffc14d,
    #ff6f61
  );
}

body.sf-dark nav,
body.sf-dark nav.stuck,
body.sf-dark nav.scrolled,
nav {
  background: rgba(10, 8, 32, 0.9) !important;
  border-bottom: 1px solid rgba(247, 242, 234, 0.1) !important;
  box-shadow: none !important;
  backdrop-filter: blur(14px) !important;
}

/* primary calls to action are coral pills everywhere */
html[data-theme] .btn-primary,
html[data-theme] .nav-cta,
html[data-theme] .btn-solid,
html[data-theme] .cta-primary,
html[data-theme] button[type="submit"],
.btn-primary,
.nav-cta,
.btn-solid,
.cta-primary {
  background: #ff6f61 !important;
  color: #1b0e22 !important;
  border: 0 !important;
  border-radius: 100px !important;
  font-weight: 600 !important;
}
html[data-theme] .btn-primary:hover,
html[data-theme] .nav-cta:hover,
.btn-primary:hover,
.nav-cta:hover {
  background: #ff8477 !important;
}

/* brand.css injects its own theme switcher + atmosphere layer; we ship one look */
.sf-theme-switch,
.sf-atmosphere {
  display: none !important;
}

/* Pages whose own copy is cream need the dusk ground under it. brand.css paints
   body cream by default, which left /agents at 1.01:1 — cream on cream. */
body.sf-dark,html[data-theme] body.sf-dark{background:#0A0820!important;color:#F7F1E6}
body.sf-dark .light,html[data-theme] body.sf-dark .light{background:#F7F1E6!important;color:#181231!important}
body.sf-dark .light h1,body.sf-dark .light h2,body.sf-dark .light h3,
body.sf-dark .light strong{color:#181231!important}
body.sf-dark .light p,body.sf-dark .light li,body.sf-dark .light td{color:#5F5789!important}

/* Dark-designed pages: their section grounds were being painted cream by
   brand.css while the copy stayed cream — 1.01:1. Ground the shells, and let
   anything explicitly marked .light keep its cream + dark ink. */
body.sf-dark .hero-bg,
body.sf-dark section:not(.light):not(.cream),
body.sf-dark .section:not(.light):not(.cream),
body.sf-dark main,
body.sf-dark .wrap:not(.light) {
  background-color: transparent !important;
}
body.sf-dark .hero-bg {
  background: radial-gradient(120% 90% at 78% 18%, rgba(155,107,255,.28), transparent 60%),
              radial-gradient(90% 80% at 12% 92%, rgba(255,111,97,.18), transparent 62%),
              linear-gradient(165deg,#0A0820 0%,#150F38 38%,#2C1350 72%,#3E1442 100%) !important;
}

/* brand.css repaints these panels cream on the dark-designed pages while their
   copy stays cream. The panels are meant to be dark, so ground them — inking
   them dark instead breaks the instances that already sit on dark. */
body.sf-dark .work-pill,
body.sf-dark .lbl,
body.sf-dark .works-note,
body.sf-dark .cad {
  background-color: #1A1436 !important;
  border-color: rgba(247, 242, 234, 0.14) !important;
}
body.sf-dark .work-pill,
body.sf-dark .work-pill *,
body.sf-dark .lbl,
body.sf-dark .lbl *,
body.sf-dark .works-note,
body.sf-dark .works-note *,
body.sf-dark .cad {
  color: #E7E1F5 !important;
}
body.sf-dark .works-note a { color: #FF9188 !important; text-decoration: underline; }
body.sf-dark .term-body .cm, body.sf-dark .cm { color: #A199C6 !important; }

/* Light-ground pages (signup, login): the wordmark was cream on cream — 1.01:1,
   i.e. invisible. Ink it dark and darken the accent half for AA. */
body:not(.sf-dark) .logo,
body:not(.sf-dark) nav .logo,
body:not(.sf-dark) .logo * {
  color: #181231 !important;
}
body:not(.sf-dark) .logo span,
body:not(.sf-dark) .logo .accent {
  color: #C2402F !important;
}