/* ============================================================
   VRS — Landing v6 · hybrid shadcn skin
   Layers over theme.css + ui.css. Retokenises the page to a
   warm Stone shadcn palette (matches product vrs-tokens.css) (Geist / Geist Mono, small radii,
   flat shadows) while keeping VRS green as the single accent.
   Loaded AFTER theme.css + ui.css so it wins on equal specificity.
   ============================================================ */

/* ── tokens · light (default) ─────────────────────────────── */
:root, [data-theme="dark"] {
  /* Stone neutrals (warm) — same family as the product (vrs-tokens.css),
     ladder preserved: bg=stone-950, paper=stone-900, elevated=stone-800. */
  --bg:        #0c0a09;
  --bg-grad:   #0e0c0b;
  --surface:   #141110;
  --surface-2: #1c1917;
  --surface-3: #292524;
  --text:      #fafaf9;
  --text-2:    #a8a29e;
  --text-3:    #8a827d;
  --hairline:  #24211f;
  --line:      #292524;
  --glass:     rgba(20,17,16,0.72);
  --glass-brd: #292524;

  /* Canonical brand ramp = product design-system tokens (vrs-tokens.css):
     green #18B24B · green-dark #12893A · green-light #4DCC75. Accent text on dark =
     the brand green itself (console dark keeps --primary #18b24b), so headings match CTAs. */
  --accent-text: #18B24B;
  --green:   #18B24B;
  --green-l: #4DCC75;
  --green-d: #12893A;
  --green-wash: color-mix(in oklab, var(--green) 15%, var(--surface));

  --shadow-card: 0 1px 2px rgba(0,0,0,0.5), 0 1px 3px rgba(0,0,0,0.35);
  --shadow-pop:  0 10px 24px -12px rgba(0,0,0,0.7), 0 4px 10px rgba(0,0,0,0.4);
  --glow: transparent;
  --nav-bg: rgba(12,10,9,0.72);
  --grid-line: rgba(255,255,255,0.035);

  --pill-amber-bg:#2a2010; --pill-amber-tx:#fbbf24;
  --pill-blue-bg:#11203a;  --pill-blue-tx:#60a5fa;
  --warn-bg:#2a2010; --warn-tx:#fbbf24; --warn-brd:rgba(251,191,36,0.22);
  color-scheme: dark;
}

[data-theme="light"] {
  /* Stone light: bg=stone-50, insets=stone-100, paper accent=product --bg-paper. */
  --bg:        #fafaf9;
  --bg-grad:   #f5f5f4;
  --surface:   #ffffff;
  --surface-2: #f5f5f4;
  --surface-3: #eceae8;
  --text:      #0c0a09;
  --text-2:    #57534e;
  --text-3:    #78716c;
  --hairline:  #efedec;
  --line:      #e7e5e4;
  --glass:     rgba(255,255,255,0.78);
  --glass-brd: #e7e5e4;

  --accent-text: #12893A;
  --green:   #18B24B;
  --green-l: #4DCC75;
  --green-d: #12893A;
  --green-wash: color-mix(in oklab, var(--green) 10%, var(--surface));

  --shadow-card: 0 1px 2px rgba(12,10,9,0.06), 0 1px 3px rgba(12,10,9,0.04);
  --shadow-pop:  0 10px 24px -14px rgba(12,10,9,0.22), 0 3px 10px rgba(12,10,9,0.06);
  --glow: transparent;
  --nav-bg: rgba(250,250,249,0.8);
  --grid-line: rgba(12,10,9,0.03);

  --pill-amber-bg:#fef7e7; --pill-amber-tx:#b45309;
  --pill-blue-bg:#eff6ff;  --pill-blue-tx:#2563eb;
  --warn-bg:#fffbeb; --warn-tx:#92500a; --warn-brd:rgba(180,83,9,0.2);
  color-scheme: light;
}

:root {
  --font: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --disp: 'Geist', ui-sans-serif, system-ui, sans-serif;
  --r-sm: 6px; --r-md: 9px; --r-lg: 12px; --r-xl: 16px;
}

/* ── base · kill the marketing glow backdrop ──────────────── */
body { font-feature-settings: "cv01","cv03","ss01","ss03"; }
body::before {
  background:
    linear-gradient(var(--bg), var(--bg-grad)) !important;
}

/* ── type ─────────────────────────────────────────────────── */
h1,h2,h3,h4 { letter-spacing: -0.028em; }
.display { letter-spacing: -0.04em; font-weight: 650; }
.h2 { font-weight: 650; }
.grad-text { background: none; -webkit-background-clip: initial; background-clip: initial; color: var(--accent-text); }
.eyebrow { letter-spacing: 0.1em; font-weight: 500; }
.eyebrow::before { box-shadow: none; border-radius: 2px; }

/* ── buttons → shadcn (no pills, flat) ────────────────────── */
.btn { border-radius: var(--r-md); font-weight: 500; font-size: 14px; padding: 0 15px; height: 40px; letter-spacing: -0.006em; }
.btn.sm { height: 34px; padding: 0 12px; font-size: 13px; }
.btn svg { width: 15px; height: 15px; }
.btn-primary { background: var(--green); color: #04220f; box-shadow: 0 1px 2px rgba(0,0,0,0.10); }
.btn-primary:hover { background: color-mix(in oklab, var(--green) 90%, #000); color: #04220f; transform: none; box-shadow: 0 1px 2px rgba(0,0,0,0.14); }
.btn-ghost { background: var(--surface); color: var(--text); border-color: var(--line); }
.btn-ghost:hover { background: var(--surface-2); border-color: var(--line); transform: none; }
[data-theme="light"] .btn-ghost:hover { background: var(--surface-2); }
.link-arrow { color: var(--accent-text); }

/* ── nav ──────────────────────────────────────────────────── */
.nav-inner { height: 60px; }
.brand .mark { border-radius: 7px; box-shadow: 0 0 0 1px var(--line); }
.nav-links a.active::after { bottom: -20px; background: var(--green); height: 2px; }
.nav-cta { gap: 10px; }
.nav-cta .signin { font-size: 14px; font-weight: 500; color: var(--text-2); }
.nav-cta .signin:hover { color: var(--text); }
.theme-toggle { width: 52px; height: 28px; }
.theme-toggle .knob { width: 22px; height: 22px; box-shadow: none; }
[data-theme="light"] .theme-toggle .knob { transform: translateX(24px); }

/* ── section rhythm ───────────────────────────────────────── */
.pad { padding: 96px 0; }
.pad-sm { padding: 56px 0; }
.surface-band { background: var(--surface); }

/* ── product mockups → flatter, shadcn radii ──────────────── */
.bframe { border-radius: var(--r-lg); box-shadow: var(--shadow-pop); }
.bframe-bar { padding: 10px 14px; }
.uicard, .ai-card { border-radius: var(--r-lg); box-shadow: var(--shadow-card); }
.icard, .integ-card { border-radius: var(--r-lg); box-shadow: var(--shadow-card); }
.icard:hover, .integ-card:hover { transform: translateY(-2px); }
.kpi { border-radius: var(--r-md); }
.panel { border-radius: var(--r-md); }
.pipeline { border-radius: var(--r-lg); box-shadow: var(--shadow-card); }

/* KPI numerals → neutral fg (green reserved for deltas/accents) */
.kpi .v, .ad-title .n { color: var(--text); }
.kpi .v.warn, .ad-title .n.warn { color: var(--pill-amber-tx); }
.metric .v { color: var(--text); }
.ov-tile .v, .ov-row .v { color: var(--text) !important; }

/* ── product viewer tabs → shadcn chips ───────────────────── */
.tabbtn { border-radius: var(--r-md); font-weight: 500; font-size: 13.5px; padding: 8px 14px; }
.tabbtn.on { background: var(--green); border-color: var(--green); box-shadow: none; }
.tabviewer { margin-top: 40px; }

/* ── stories thumbs / misc glow cleanups ──────────────────── */
.cta::before { background: none; }
.cta { padding: 104px 0; }

/* ── card grids: shadcn hover accent line off ─────────────── */
.icard:hover { border-color: color-mix(in oklab, var(--green) 34%, var(--line)); }

/* focus ring — accessibility, shadcn style */
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid color-mix(in oklab, var(--green) 60%, transparent);
  outline-offset: 2px; border-radius: var(--r-sm);
}