/* SalesX — Design system tokens
   Aesthetic: aligned to Virtual Captains parent brand —
   vivid blue primary, deep navy ink, soft blue-tinted canvas,
   white paper surfaces. */

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

:root {
  /* Surfaces — clean white paper over a faintly blue-tinted canvas */
  --sx-canvas: #F2F8FD;        /* outer page wash, soft sky */
  --sx-paper:  #FFFFFF;        /* main surface */
  --sx-card:   #FFFFFF;        /* elevated card */
  --sx-ink:    #14223F;        /* primary text — deep navy (parent footer) */
  --sx-ink-2:  #3A4A66;        /* secondary text */
  --sx-muted:  #7787A0;        /* labels */
  --sx-rule:   #DCE6F2;        /* dividers, hairlines */
  --sx-soft:   #EAF2FB;        /* hover / subtle fill */

  /* Brand — Virtual Captains blue family. We keep the --sx-indigo
     and --sx-coral names so every page picks the new palette up
     without renaming a single variable. */
  --sx-indigo:    oklch(0.56 0.20 254);   /* primary — bright VC blue */
  --sx-indigo-2:  oklch(0.46 0.19 254);   /* primary press / hover */
  --sx-indigo-50: oklch(0.96 0.03 254);   /* primary wash */
  --sx-coral:     oklch(0.72 0.15 230);   /* cyan-blue secondary accent */
  --sx-coral-50:  oklch(0.96 0.04 230);
  --sx-green:     oklch(0.62 0.13 168);   /* slight teal lean for harmony */
  --sx-amber:     oklch(0.78 0.13 78);
  --sx-red:       oklch(0.60 0.18 25);

  /* Type */
  --sx-sans: "Roboto", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --sx-serif: "Instrument Serif", "Times New Roman", serif;
  --sx-mono: "Roboto Mono", ui-monospace, "SF Mono", monospace;

  /* Spacing scale (4-based) */
  --sx-1: 4px;   --sx-2: 8px;   --sx-3: 12px;
  --sx-4: 16px;  --sx-5: 20px;  --sx-6: 24px;
  --sx-7: 32px;  --sx-8: 40px;  --sx-9: 48px;
  --sx-10: 64px; --sx-11: 80px;

  /* Radii */
  --sx-r-1: 6px;
  --sx-r-2: 10px;
  --sx-r-3: 14px;
  --sx-r-4: 20px;
  --sx-r-5: 28px;
  --sx-r-pill: 999px;

  /* Shadows — soft, paper-like */
  --sx-elev-1: 0 1px 0 rgba(20,20,20,0.04), 0 1px 2px rgba(20,20,20,0.04);
  --sx-elev-2: 0 1px 0 rgba(20,20,20,0.04), 0 4px 12px rgba(20,20,20,0.06);
  --sx-elev-3: 0 24px 50px -20px rgba(20,20,20,0.18), 0 8px 16px rgba(20,20,20,0.06);
}

/* Dark mode — same VC blue family, on deep navy surfaces */
:root[data-theme="dark"] {
  --sx-canvas: #07101F;
  --sx-paper:  #0E1A2E;
  --sx-card:   #15233B;
  --sx-ink:    #ECF2FB;
  --sx-ink-2:  #B7C2D4;
  --sx-muted:  #8492A8;
  --sx-rule:   #1F2D46;
  --sx-soft:   #16243C;
  --sx-indigo:    oklch(0.72 0.17 254);
  --sx-indigo-2:  oklch(0.62 0.18 254);
  --sx-indigo-50: oklch(0.30 0.10 254);
  --sx-coral:     oklch(0.78 0.13 230);
  --sx-coral-50:  oklch(0.32 0.09 230);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--sx-sans);
  color: var(--sx-ink);
  background: var(--sx-canvas);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.sx-serif { font-family: var(--sx-serif); font-weight: 400; letter-spacing: -0.01em; }
.sx-mono  { font-family: var(--sx-mono); font-feature-settings: "tnum"; }

/* Utility */
.sx-tnum { font-variant-numeric: tabular-nums; }
.sx-eyebrow {
  font-family: var(--sx-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sx-muted);
}

/* Brand mark */
.sx-mark {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--sx-sans);
  font-weight: 600;
  letter-spacing: -0.02em;
}
.sx-mark__glyph {
  display: inline-block;
  width: 22px;
  height: 22px;
  background: var(--sx-ink);
  color: var(--sx-paper);
  border-radius: 6px;
  position: relative;
  font-family: var(--sx-serif);
  font-style: italic;
  font-size: 16px;
  line-height: 22px;
  text-align: center;
}
.sx-mark__glyph::after {
  content: "";
  position: absolute;
  right: -3px; top: -3px;
  width: 7px; height: 7px;
  background: var(--sx-coral);
  border-radius: 2px;
  transform: rotate(45deg);
}

/* Scrollbar quietened */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.18); border-radius: 4px; }
::-webkit-scrollbar-track { background: transparent; }

/* ────────────────────────────────────────────────────────────────────
   Client override (May 2026): replace italic emphasis with Roboto,
   AND replace all serif (.sx-serif / Instrument Serif) with Roboto.
   Single global override so every page + widget picks it up.
   ──────────────────────────────────────────────────────────────────── */

/* Remove serif everywhere — headlines, brand mark, org avatars, etc. */
.sx-serif,
[style*="--sx-serif"],
[style*="Instrument Serif"] {
  font-family: var(--sx-sans) !important;
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* Italic emphasis → Roboto, no italic. */
[style*="italic"],
.ital, em, i {
  font-family: var(--sx-sans) !important;
  font-style: normal !important;
  font-weight: 500;
}

/* Inside (former) serif headlines, give the emphasis word a heavier
   weight so it still reads as an accent. */
.sx-serif [style*="italic"],
.sx-serif .ital,
.sx-serif em,
.sx-serif i {
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* Brand-mark "X" — now bold sans, matches "Sales". */
.sx-mark__glyph {
  font-family: var(--sx-sans) !important;
  font-style: normal !important;
  font-weight: 700;
}