/* ==========================================================================
   SunSail — SailorLabs design system for the docs site.

   Ports the PurserPay brand tokens (purserpay/v1/src/styles/globals.css) so the
   two products read as one family — SAME structure, warm off-white canvas,
   ink text, mono technical accents — but swaps PurserPay's cyan for SunSail's
   own cobalt-blue accent (sampled from the sail in assets/sunsail_logo.png).

   Doctrine: minimalist, editorial, technical-clean. Type and whitespace do the
   work. No gradients, no hard shadows, no thick borders.
   ========================================================================== */

:root {
  /* SunSail brand palette — single source of truth. */
  --sail-accent:        #1E7FC2;   /* cobalt — the logo blue */
  --sail-accent-hover:  #17608F;   /* darker, for hover/pressed */
  --sail-accent-dark:   #4FA3DB;   /* lifted, for dark mode */
  --sail-bg:            #FAF9F7;   /* warm off-white (not pure white) */
  --sail-surface:       #FFFFFF;
  --sail-band:          #F1EFEC;   /* section band / pill fill */
  --sail-ink:           #111014;   /* near-black text */
  --sail-muted:         #615C57;   /* secondary text */
  --sail-hairline:      #E5E2DD;   /* borders */
  --sail-success:       #2F9E6B;   /* green — passing tests */
  --sail-radius:        0.75rem;

  --md-code-hl-comment-color: var(--sail-muted);
}

/* ---- Light scheme: map the brand palette onto Material's slots ---------- */
[data-md-color-scheme="default"] {
  --md-primary-fg-color:        var(--sail-accent);
  --md-primary-fg-color--light: var(--sail-accent);
  --md-primary-fg-color--dark:  var(--sail-accent-hover);
  --md-accent-fg-color:         var(--sail-accent-hover);

  --md-default-bg-color:        var(--sail-bg);
  --md-default-fg-color:            var(--sail-ink);
  --md-default-fg-color--light:    var(--sail-muted);
  --md-default-fg-color--lighter:  #8b857f;
  --md-typeset-color:           var(--sail-ink);
  --md-typeset-a-color:         var(--sail-accent);

  --sail-terminal-bg:   #14171c;   /* dark code card even in light mode */
  --sail-terminal-fg:   #e7edf3;
}

/* ---- Dark scheme: warm dark canvas, accent lifted for contrast --------- */
[data-md-color-scheme="slate"] {
  --md-hue: 220;
  --md-primary-fg-color:        var(--sail-accent-dark);
  --md-primary-fg-color--light: var(--sail-accent-dark);
  --md-primary-fg-color--dark:  var(--sail-accent);
  --md-accent-fg-color:         var(--sail-accent-dark);

  --md-default-bg-color:        #17181c;   /* warm-ish near-black */
  --md-typeset-a-color:         var(--sail-accent-dark);

  --sail-ink:       #f2f0ee;
  --sail-muted:     #a7a29c;
  --sail-surface:   #1e2024;
  --sail-band:      #23262b;
  --sail-hairline:  #313640;
  --sail-terminal-bg: #0f1216;
  --sail-terminal-fg: #e7edf3;
}

/* Inter Tight is a touch tight by default; nudge global text legibility. */
.md-typeset {
  letter-spacing: -0.006em;
}

/* Inline code, command names, addresses, selectors → the mono signature. */
.md-typeset code {
  font-feature-settings: "kern";
}

/* ==========================================================================
   Landing page (docs/index.md, which sets hide: navigation, toc)
   Scoped via :has() so the wider canvas only applies to the home.
   ========================================================================== */

body:has(.sail-hero) .md-grid {
  max-width: 72rem;            /* the landing breathes wider than the docs */
}
body:has(.sail-hero) .md-content__inner {
  margin-bottom: 0;
}
/* Kill the empty edit/anchor affordances on the landing. */
body:has(.sail-hero) .md-content__inner > :first-child {
  margin-top: 0.4rem;
}

/* ---- Hero ---------------------------------------------------------------- */
.sail-hero {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  align-items: center;
  gap: clamp(40px, 5vw, 72px);
  padding: clamp(28px, 5vw, 64px) 0 clamp(20px, 3vw, 36px);
}

.sail-eyebrow {
  display: inline-block;
  font-family: var(--md-code-font, monospace);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: lowercase;
  color: var(--sail-accent);
  margin-bottom: 20px;
}
[data-md-color-scheme="slate"] .sail-eyebrow { color: var(--sail-accent-dark); }

.sail-title {
  font-size: clamp(2.4rem, 5.4vw, 4.1rem);
  font-weight: 800;
  line-height: 1.03;
  letter-spacing: -0.03em;
  color: var(--sail-ink);
  margin: 0 0 20px;
}
.sail-title .accent { color: var(--sail-accent); }
[data-md-color-scheme="slate"] .sail-title .accent { color: var(--sail-accent-dark); }

.md-typeset .sail-lead {
  max-width: 34ch;
  font-size: clamp(17px, 1.7vw, 20px);
  font-weight: 500;
  line-height: 1.45;
  color: var(--sail-ink);
  margin: 0 0 18px;
}
.md-typeset .sail-sub {
  max-width: 48ch;
  font-size: 16.5px;
  line-height: 1.62;
  color: var(--sail-muted);
  margin: 0 0 28px;
}

/* ---- Buttons ------------------------------------------------------------- */
.sail-cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-bottom: 26px;
}
.md-typeset .sail-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color .15s, color .15s, border-color .15s;
}
.md-typeset .sail-btn--primary {
  background: var(--sail-accent);
  color: #fff;
}
.md-typeset .sail-btn--primary:hover {
  background: var(--sail-accent-hover);
  color: #fff;
}
.md-typeset .sail-btn--ghost {
  border: 1px solid var(--sail-hairline);
  color: var(--sail-ink);
}
.md-typeset .sail-btn--ghost:hover {
  border-color: var(--sail-accent);
  color: var(--sail-accent);
}
[data-md-color-scheme="slate"] .md-typeset .sail-btn--primary {
  background: var(--sail-accent-dark); color: #0f1216;
}
[data-md-color-scheme="slate"] .md-typeset .sail-btn--primary:hover {
  background: var(--sail-accent); color: #fff;
}

/* The install one-liner under the hero CTAs. */
.md-typeset .sail-install {
  margin: 6px 0 0;
  font-size: 13.5px;
  color: var(--sail-muted);
}
.md-typeset .sail-install code {
  background: var(--sail-band);
  color: var(--sail-ink);
  padding: 3px 8px;
  border-radius: 6px;
}

/* ---- Terminal card (hero right, the CLI "product mock") ----------------- */
.sail-terminal {
  background: var(--sail-terminal-bg);
  color: var(--sail-terminal-fg);
  border-radius: 12px;
  box-shadow: 0 18px 50px -22px rgba(17, 16, 20, .45),
              0 2px 8px -3px rgba(17, 16, 20, .25);
  overflow: hidden;
  font-family: var(--md-code-font, monospace);
  font-size: 13px;
  line-height: 1.6;
}
.sail-terminal__bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 11px 14px;
  background: rgba(255, 255, 255, .05);
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.sail-terminal__bar i {
  width: 11px; height: 11px; border-radius: 50%; display: inline-block;
}
.sail-terminal__bar i:nth-child(1) { background: #ff5f57; }
.sail-terminal__bar i:nth-child(2) { background: #febc2e; }
.sail-terminal__bar i:nth-child(3) { background: #28c840; }
.sail-terminal__bar span {
  margin-left: 8px; font-size: 12px; opacity: .55;
}
.sail-terminal pre {
  margin: 0;
  padding: 16px 18px;
  overflow-x: auto;
  white-space: pre;
  background: transparent;
}
.sail-terminal .p  { color: #5fd68a; }   /* prompt / PASS green */
.sail-terminal .d  { color: #8b95a3; }   /* dim */
.sail-terminal .a  { color: #63b3e8; }   /* accent (cobalt-ish) */

/* ---- Section scaffolding ------------------------------------------------ */
.sail-section {
  padding: clamp(32px, 5vw, 56px) 0 clamp(8px, 2vw, 16px);
  border-top: 1px solid var(--sail-hairline);
  margin-top: clamp(24px, 4vw, 40px);
}
.md-typeset .sail-section > h2 {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 6px 0 6px;
}
.md-typeset .sail-section__intro {
  color: var(--sail-muted);
  max-width: 60ch;
  margin: 0 0 22px;
}

/* ---- Why: feature cards ------------------------------------------------- */
.sail-why {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
  margin: 8px 0 4px;
}
.sail-card {
  background: var(--sail-surface);
  border: 1px solid var(--sail-hairline);
  border-radius: var(--sail-radius);
  padding: 22px 22px 24px;
  box-shadow: 0 12px 30px -24px rgba(17, 16, 20, .35);
}
.md-typeset .sail-card h3 {
  font-size: 1.02rem;
  font-weight: 700;
  margin: 12px 0 6px;
  letter-spacing: -0.01em;
}
.md-typeset .sail-card p {
  color: var(--sail-muted);
  font-size: 14.5px;
  line-height: 1.55;
  margin: 0;
}

/* ---- Pills -------------------------------------------------------------- */
.sail-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 11px;
  border-radius: 999px;
  background: var(--sail-band);
  color: var(--sail-ink);
  font-family: var(--md-code-font, monospace);
  font-size: 11.5px;
  letter-spacing: 0.02em;
}
.sail-pill::before {
  content: "";
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--sail-success);
}

/* ---- Walkthrough step labels ------------------------------------------- */
.md-typeset .sail-step {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 26px 0 8px;
}
.md-typeset .sail-step code {
  font-size: 15px;
  font-weight: 600;
  background: var(--sail-band);
  color: var(--sail-ink);
  padding: 3px 9px;
  border-radius: 6px;
}
.md-typeset .sail-step .sail-step__note {
  color: var(--sail-muted);
  font-size: 14px;
}

/* Give the landing's code blocks the same soft-card feel. */
body:has(.sail-hero) .md-typeset pre > code {
  border-radius: 10px;
}

/* ---- Final CTA ---------------------------------------------------------- */
.sail-final {
  text-align: center;
  padding: clamp(40px, 6vw, 72px) 0 clamp(20px, 3vw, 32px);
  border-top: 1px solid var(--sail-hairline);
  margin-top: clamp(28px, 4vw, 44px);
}
.md-typeset .sail-final h2 {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 20px;
}
.sail-final .sail-cta-row { justify-content: center; }

/* ---- Small screens ------------------------------------------------------ */
@media screen and (max-width: 44.9375em) {
  .sail-hero { padding-top: 12px; }
  .sail-terminal { font-size: 12px; }
}