/* ─────────────────────────────────────────────────────────────
   Vostego Refined Design System — Shared Tokens
   ───────────────────────────────────────────────────────────── */

:root {
  /* Paper & Ink — warmer than current text-primary, richer paper */
  --paper-0: #faf8f3;        /* warm off-white (was #fafaf8) */
  --paper-1: #f4f1ea;        /* surface alt */
  --paper-2: #ebe6dc;        /* divider */
  --ink-0: #15171c;          /* deep ink for headings */
  --ink-1: #2a2d36;          /* body */
  --ink-2: #5b6070;          /* secondary */
  --ink-3: #8a8f9c;          /* tertiary */
  --ink-4: #bcbfc7;          /* placeholder */

  /* Brand — tightened triad */
  --brand: #5560d0;          /* primary purple, slightly more confident */
  --brand-soft: #ebecf9;
  --brand-deep: #2f378a;
  --sage: #6da8a2;
  --sage-soft: #dfeae8;
  --clay: #c47b4a;           /* accent — more saturated than original */
  --clay-soft: #f4e2d2;
  --clay-deep: #7a3f1e;

  /* "On" text colors — what sits on top of a colored chip / button */
  --on-accent: #15171c;      /* dark text on clay buttons */
  --on-ink: #ffffff;         /* light text on ink-0 surfaces */

  /* Coach / hero-dark surfaces — used by mobile coach + paywall background.
     In editorial mode these become deep navy + lifted navy. */
  --panel-dark: #0f1115;
  --panel-dark-2: #15181f;

  /* Card surface — the bright surface that sits on paper-0.
     In dark theme this flips to a lifted dark surface so cards still pop. */
  --card: #ffffff;

  /* Surface depths */
  --line: rgba(20, 22, 28, 0.08);
  --line-strong: rgba(20, 22, 28, 0.14);
  --shadow-sm: 0 1px 2px rgba(20, 22, 28, 0.04);
  --shadow-md: 0 6px 24px rgba(20, 22, 28, 0.06);
  --shadow-lg: 0 20px 45px rgba(20, 22, 28, 0.08);

  /* Editorial type */
  --font-display: 'Fraunces', 'DM Serif Display', Georgia, serif;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-serif: 'Source Serif Pro', 'Source Serif 4', Georgia, serif;
  --font-mono: 'JetBrains Mono', 'IBM Plex Mono', SF Mono, monospace;

  /* Radii */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-2xl: 28px;
  --radius-full: 999px;

  /* Spacing scale (8pt-ish, named to match the codebase) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-10: 56px;
  --space-12: 72px;
  --space-16: 104px;
  --space-20: 140px;

  /* Type scale — fluid, editorial */
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 18px;
  --text-xl: 21px;
  --text-2xl: clamp(22px, 2.2vw, 27px);
  --text-3xl: clamp(27px, 3vw, 34px);
  --text-4xl: clamp(33px, 4vw, 46px);
  --text-5xl: clamp(40px, 5.4vw, 66px);
  --text-6xl: clamp(48px, 7vw, 88px);
  --leading-relaxed: 1.6;
}

/* ─────────────────────────────────────────────────────────────
   Theme: Editorial (pitch-deck palette)
   Navy ink · periwinkle haze · dusty rose accent
   ───────────────────────────────────────────────────────────── */
[data-theme="editorial"] {
  --paper-0: #fcfbf9;
  --paper-1: #f3f1ee;
  --paper-2: #e6e3dd;

  --ink-0: #232946;          /* deep navy replaces near-black */
  --ink-1: #2e3556;
  --ink-2: #5b6485;
  --ink-3: #8a92ad;
  --ink-4: #b8c1d4;

  --brand: #232946;          /* navy is the brand */
  --brand-soft: #e5e8f6;     /* periwinkle haze */
  --brand-deep: #161a35;

  /* Accent: dusty rose — slightly more saturated than the deck's #EEBBC3
     for legible UI buttons & pills, while keeping the deck's mood. */
  --clay: #d99aa3;
  --clay-soft: #f6e3e6;
  --clay-deep: #8a4d56;

  --sage: #b8c1ec;           /* periwinkle stand-in for "second support" */
  --sage-soft: #eef0fa;

  --on-accent: #232946;      /* navy text on dusty-rose accents */
  --on-ink: #fcfbf9;
  --panel-dark: #161a35;     /* deep navy panel */
  --panel-dark-2: #232946;   /* lifted navy panel */

  --line: rgba(35, 41, 70, 0.10);
  --line-strong: rgba(35, 41, 70, 0.16);
  --shadow-sm: 0 1px 2px rgba(35, 41, 70, 0.04);
  --shadow-md: 0 6px 24px rgba(35, 41, 70, 0.07);
  --shadow-lg: 0 20px 45px rgba(35, 41, 70, 0.09);
}
[data-theme="editorial"] .coach-surface {
  --coach-ink: #232946;
  --coach-accent: #d99aa3;
}
[data-theme="editorial"] .admin-surface {
  --a-bg: #0c0f1a;
  --a-panel: #161a35;
  --a-panel-2: #232946;
  --a-brand: #b8c1ec;
}

/* ─────────────────────────────────────────────────────────────
   Theme: Dark — full inversion, dusty rose preserved
   Built on the editorial navy. Surface = deep navy paper, ink = warm white.
   ───────────────────────────────────────────────────────────── */
[data-theme="dark"] {
  --paper-0: #0f1320;        /* near-black navy base */
  --paper-1: #1a1f33;        /* lifted surface */
  --paper-2: #2a3050;        /* divider / border surface */

  --ink-0: #f3eee6;          /* warm parchment */
  --ink-1: #d8d3c9;
  --ink-2: #9aa1b8;
  --ink-3: #6f7896;
  --ink-4: #4a5375;

  --brand: #b8c1ec;          /* periwinkle gains presence on dark */
  --brand-soft: #2a3050;
  --brand-deep: #e5e8f6;

  --clay: #e7b3bb;           /* dusty rose, slightly lifted for dark */
  --clay-soft: #2e2128;
  --clay-deep: #f3d0d5;

  --sage: #b8c1ec;
  --sage-soft: #232946;

  --on-accent: #232946;
  --on-ink: #0f1320;
  --panel-dark: #060816;
  --panel-dark-2: #0f1320;

  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.14);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 6px 24px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 20px 45px rgba(0, 0, 0, 0.5);

  --card: #1a1f33;
}
[data-theme="dark"] .placeholder-img {
  background:
    repeating-linear-gradient(
      135deg,
      rgba(255,255,255,0.04) 0 10px,
      rgba(255,255,255,0.07) 10px 20px
    ),
    var(--paper-1);
  color: var(--ink-3);
}
[data-theme="dark"] .coach-surface {
  --coach-ink: #0f1320;
  --coach-paper: #1a1f33;
  --coach-accent: #e7b3bb;
}
[data-theme="dark"] .admin-surface {
  --a-bg: #050614;
  --a-panel: #0f1320;
  --a-panel-2: #1a1f33;
  --a-text: #f3eee6;
  --a-muted: #9aa1b8;
  --a-brand: #b8c1ec;
}

/* Some artboards hardcode #fff backgrounds for cards — give them a
   sensible dark equivalent without touching component code. */
[data-theme="dark"] .artboard [style*="background: rgb(255, 255, 255)"],
[data-theme="dark"] .artboard [style*="background:#fff"] {
  /* This pseudo-selector won't actually match inline styles reliably,
     so we instead rely on components using var(--paper-0/1) for surfaces.
     Hardcoded white surfaces will appear bright; that's documented. */
}

/* ─────────────────────────────────────────────────────────────
   Theme: Forest — grounded evergreen, cream paper, terracotta accent
   Calm and reassuring; reads well for the "between things" mood.
   ───────────────────────────────────────────────────────────── */
[data-theme="forest"] {
  --paper-0: #f5f3ea;
  --paper-1: #ece9dd;
  --paper-2: #dddccd;
  --ink-0: #18271f;
  --ink-1: #243a2e;
  --ink-2: #4f6358;
  --ink-3: #7e9085;
  --ink-4: #aebbb1;
  --brand: #2f6a4f;
  --brand-soft: #dde9e1;
  --brand-deep: #1c4632;
  --clay: #c47a45;
  --clay-soft: #f0ddcb;
  --clay-deep: #6f3c1d;
  --sage: #7fae8c;
  --sage-soft: #e0ebe2;
  --on-accent: #18271f;
  --on-ink: #f5f3ea;
  --panel-dark: #11241a;
  --panel-dark-2: #18271f;
  --line: rgba(24, 39, 31, 0.10);
  --line-strong: rgba(24, 39, 31, 0.16);
  --shadow-sm: 0 1px 2px rgba(24, 39, 31, 0.04);
  --shadow-md: 0 6px 24px rgba(24, 39, 31, 0.07);
  --shadow-lg: 0 20px 45px rgba(24, 39, 31, 0.10);
}

/* ─────────────────────────────────────────────────────────────
   Theme: Slate — cool neutral, indigo brand, muted teal accent
   Modern and restrained; the most "product" of the light themes.
   ───────────────────────────────────────────────────────────── */
[data-theme="slate"] {
  --paper-0: #f4f5f7;
  --paper-1: #eaecf0;
  --paper-2: #dce0e6;
  --ink-0: #1a2030;
  --ink-1: #2a3142;
  --ink-2: #586072;
  --ink-3: #868d9e;
  --ink-4: #b6bcc8;
  --brand: #3a55c8;
  --brand-soft: #e4e8f8;
  --brand-deep: #243a8f;
  --clay: #3f8a80;
  --clay-soft: #dcebe8;
  --clay-deep: #265b53;
  --sage: #6da8a2;
  --sage-soft: #dfeae8;
  --on-accent: #ffffff;
  --on-ink: #f4f5f7;
  --panel-dark: #141a28;
  --panel-dark-2: #1a2030;
  --line: rgba(26, 32, 48, 0.09);
  --line-strong: rgba(26, 32, 48, 0.15);
  --shadow-sm: 0 1px 2px rgba(26, 32, 48, 0.04);
  --shadow-md: 0 6px 24px rgba(26, 32, 48, 0.07);
  --shadow-lg: 0 20px 45px rgba(26, 32, 48, 0.10);
}

/* ─────────────────────────────────────────────────────────────
   Theme: Mocha — warm espresso ink, coffee brand, amber accent
   Premium and editorial; good for the "growth / ambition" story.
   ───────────────────────────────────────────────────────────── */
[data-theme="mocha"] {
  --paper-0: #f7f3ec;
  --paper-1: #efe9de;
  --paper-2: #e2d9c9;
  --ink-0: #241c14;
  --ink-1: #38291d;
  --ink-2: #6a5848;
  --ink-3: #9a8775;
  --ink-4: #c4b4a1;
  --brand: #8a5a36;
  --brand-soft: #ece0d2;
  --brand-deep: #5a3823;
  --clay: #c0902b;
  --clay-soft: #f1e4c2;
  --clay-deep: #7a5c12;
  --sage: #9a8f6a;
  --sage-soft: #ece6d4;
  --on-accent: #241c14;
  --on-ink: #f7f3ec;
  --panel-dark: #1a130c;
  --panel-dark-2: #241c14;
  --line: rgba(36, 28, 20, 0.10);
  --line-strong: rgba(36, 28, 20, 0.16);
  --shadow-sm: 0 1px 2px rgba(36, 28, 20, 0.05);
  --shadow-md: 0 6px 24px rgba(36, 28, 20, 0.08);
  --shadow-lg: 0 20px 45px rgba(36, 28, 20, 0.11);
}

/* ─────────────────────────────────────────────────────────────
   Type systems — toggle the font triad independently of palette.
   Default (no attribute) = Refined: Fraunces / Inter / Source Serif.
   ───────────────────────────────────────────────────────────── */
[data-type="grotesk"] {
  --font-display: 'Space Grotesk', 'Inter', sans-serif;
  --font-sans: 'Inter', -apple-system, system-ui, sans-serif;
  --font-serif: 'Source Serif 4', 'Source Serif Pro', Georgia, serif;
  --font-mono: 'Space Mono', 'JetBrains Mono', monospace;
}
[data-type="literary"] {
  --font-display: 'Newsreader', 'Fraunces', Georgia, serif;
  --font-sans: 'Inter', -apple-system, system-ui, sans-serif;
  --font-serif: 'Newsreader', Georgia, serif;
  --font-mono: 'JetBrains Mono', monospace;
}
[data-type="neo"] {
  --font-display: 'Bricolage Grotesque', 'Inter', sans-serif;
  --font-sans: 'Inter', -apple-system, system-ui, sans-serif;
  --font-serif: 'Source Serif 4', 'Source Serif Pro', Georgia, serif;
  --font-mono: 'JetBrains Mono', monospace;
}

/* ─────────────────────────────────────────────────────────────
   AI Coach surface tokens — confident near-black
   ───────────────────────────────────────────────────────────── */
.coach-surface {
  --coach-ink: #0f1115;
  --coach-paper: #ffffff;
  --coach-paper-warm: #f7f6f2;
  --coach-accent: #c47b4a;
  --coach-rule: rgba(15, 17, 21, 0.08);
}

/* ─────────────────────────────────────────────────────────────
   CMS surface tokens — content-first, low-chroma chrome
   ───────────────────────────────────────────────────────────── */
.cms-surface {
  --cms-bg: #f1f1f1;
  --cms-chrome: #1d2327;
  --cms-chrome-2: #2c3338;
  --cms-text: #1d2327;
  --cms-muted: #50575e;
  --cms-line: #dcdcde;
  --cms-blue: #2271b1;
  --cms-blue-deep: #135e96;
  --cms-paper: #ffffff;
  --cms-lock: #b35900;
  --cms-lock-soft: #fcf3e6;
}

/* ─────────────────────────────────────────────────────────────
   Admin surface tokens — operational, dense, restrained
   ───────────────────────────────────────────────────────────── */
.admin-surface {
  --a-bg: #0e1014;
  --a-panel: #15181f;
  --a-panel-2: #1c1f28;
  --a-line: rgba(255, 255, 255, 0.06);
  --a-line-strong: rgba(255, 255, 255, 0.10);
  --a-text: #e6e8ee;
  --a-muted: #8a8f9c;
  --a-dim: #5b6070;
  --a-brand: #7d8af0;
  --a-good: #4ec38e;
  --a-warn: #d8a64b;
  --a-bad: #e07271;
}

/* ─────────────────────────────────────────────────────────────
   Shared utility classes inside artboards
   ───────────────────────────────────────────────────────────── */
.artboard {
  font-family: var(--font-sans);
  color: var(--ink-1);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'ss01' 1, 'cv11' 1;
}
.artboard h1, .artboard h2, .artboard h3 { font-family: var(--font-display); color: var(--ink-0); letter-spacing: -0.02em; }
.artboard .display { font-family: var(--font-display); letter-spacing: -0.02em; }
.artboard .serif { font-family: var(--font-serif); }
.artboard .mono { font-family: var(--font-mono); font-feature-settings: 'tnum' 1; }
.artboard .tnum { font-variant-numeric: tabular-nums; }

/* Placeholder image — subtly-striped */
.placeholder-img {
  background:
    repeating-linear-gradient(
      135deg,
      rgba(20,22,28,0.04) 0 10px,
      rgba(20,22,28,0.07) 10px 20px
    ),
    var(--paper-1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: var(--r-md);
}

/* Watercolor pill — pulled back from current overuse */
.wc-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  font: 500 11.5px/1 var(--font-sans);
  letter-spacing: 0.01em;
}
.wc-pill .dot { width: 6px; height: 6px; border-radius: 999px; }

/* "Doodle" abstract glyph — restrained one-stroke icons */
.doodle {
  display: inline-flex; width: 20px; height: 20px;
  align-items: center; justify-content: center;
  color: var(--ink-0);
}

/* Before/After badge inside artboards */
.state-badge {
  position: absolute; top: 12px; right: 12px;
  font: 600 10px/1 var(--font-mono);
  text-transform: uppercase; letter-spacing: 0.12em;
  padding: 5px 8px; border-radius: 999px;
  background: rgba(255,255,255,0.9); color: var(--ink-2);
  border: 1px solid var(--line);
  z-index: 50;
}
.state-badge.before { color: #b25b3a; border-color: rgba(196,123,74,0.4); background: #fdf3ec; }
.state-badge.after { color: #2c6d54; border-color: rgba(78,195,142,0.4); background: #ebf6f0; }

/* Global toolbar */
#vt-toolbar {
  position: fixed; top: 16px; left: 50%; transform: translateX(-50%);
  z-index: 1000;
  display: flex; align-items: center; gap: 12px;
  padding: 6px 8px 6px 14px;
  background: rgba(20,22,28,0.92);
  backdrop-filter: blur(12px) saturate(180%);
  border-radius: 999px;
  color: #fff;
  font-family: var(--font-sans);
  box-shadow: 0 10px 30px rgba(0,0,0,0.18), 0 0 0 1px rgba(255,255,255,0.06) inset;
}
#vt-toolbar .vt-brand { font: 700 13px/1 var(--font-display); letter-spacing: 0.02em; }
#vt-toolbar .vt-sep { width: 1px; height: 16px; background: rgba(255,255,255,0.18); }
#vt-toolbar .vt-seg {
  display: flex; padding: 2px;
  background: rgba(255,255,255,0.08); border-radius: 999px;
}
#vt-toolbar .vt-seg button {
  border: 0; background: transparent; color: rgba(255,255,255,0.7);
  font: 600 11.5px/1 var(--font-sans); letter-spacing: 0.02em;
  padding: 6px 14px; border-radius: 999px; cursor: pointer;
  transition: all .2s;
}
#vt-toolbar .vt-seg button.on { background: #fff; color: #15171c; }

/* Marketing pages set their own paper background in marketing.css */

/* ─────────────────────────────────────────────────────────────
   Type helpers — opt-in classes for editorial typography
   ───────────────────────────────────────────────────────────── */
.refined-type { font-family: var(--font-sans); -webkit-font-smoothing: antialiased; font-feature-settings: 'ss01' 1, 'cv11' 1; }
.refined-type .display,
.refined-display { font-family: var(--font-display); letter-spacing: -0.02em; }
.refined-serif { font-family: var(--font-serif); }
.refined-mono { font-family: var(--font-mono); font-feature-settings: 'tnum' 1; }
.refined-tnum { font-variant-numeric: tabular-nums; }

/* ─────────────────────────────────────────────────────────────
   FleetSentinel Root Scopes
   ───────────────────────────────────────────────────────────── */

.a-root {
  --accent: var(--a-accent);
  --accent-soft: var(--a-accent-soft);
  --accent-ink: var(--a-accent-ink);
  --bg: var(--a-bg);
  --surface: var(--a-surface);
  --line: var(--a-line);
  --line-strong: var(--a-line-strong);
  --ink: var(--a-ink);
  --ink-2: var(--a-ink-2);
  --ink-3: var(--a-ink-3);
  --ok: var(--a-ok);
  --warn: var(--a-warn);
  --err: var(--a-err);
  --repair: var(--a-repair);

  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 13.5px;
  line-height: 1.5;
  letter-spacing: -0.005em;
}

.b-root {
  --bg: var(--b-bg);
  --bg-2: var(--b-bg-2);
  --bg-3: var(--b-bg-3);
  --bg-cell: var(--b-bg-cell);
  --line: var(--b-line);
  --line-soft: var(--b-line-soft);
  --ink: var(--b-ink);
  --ink-2: var(--b-ink-2);
  --ink-3: var(--b-ink-3);
  --ink-4: var(--b-ink-4);
  --signal: var(--b-signal);
  --signal-dim: var(--b-signal-dim);
  --signal-bg: var(--b-signal-bg);
  --warn: var(--b-warn);
  --err: var(--b-err);

  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: var(--space-3);
  line-height: 1.45;
  font-feature-settings: 'tnum';
}

/* ─────────────────────────────────────────────────────────────
   Premium Design Polish — Specification Hooks
   ───────────────────────────────────────────────────────────── */

@keyframes fs-pulse {
  0%   { box-shadow: 0 0 0 0 currentColor; opacity: 1; }
  70%  { box-shadow: 0 0 0 6px transparent; opacity: 0.85; }
  100% { box-shadow: 0 0 0 0 transparent; opacity: 1; }
}

@keyframes fs-blink {
  0%, 50% { opacity: 1; }
  50.01%, 100% { opacity: 0.25; }
}

/* Floating animation for doodles/icons */
@keyframes fs-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(calc(var(--space-1) * -1)); }
}

.hover-float:hover .doodle,
.hover-float:hover svg,
.hover-float:hover img {
  animation: fs-float 3s ease-in-out infinite;
}

/* Specular Highlight: Light-source gloss for primary buttons */
.specular-btn {
  position: relative;
  overflow: hidden;
}

.specular-btn::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at center, rgba(255,255,255,0.15) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.specular-btn:hover::after {
  opacity: 1;
  animation: specular-sweep 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes specular-sweep {
  0% { transform: translate(-30%, -30%); }
  100% { transform: translate(10%, 10%); }
}

/* Affirmative Easing: Spring-loaded "success" transition */
.affirmative-moment {
  transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.affirmative-moment.active {
  transform: scale(1.05);
}

/* Typography Helpers */
.display { font-family: var(--font-display); letter-spacing: -0.02em; }
.serif { font-family: var(--font-serif); }
.mono { font-family: var(--font-mono); font-feature-settings: 'tnum' 1; }
.tnum { font-variant-numeric: tabular-nums; }