/*
 * DESIGN SYSTEM COMMITMENT (28-template-design §3)
 * ────────────────────────────────────────────────────────────────────────────
 * Mode:        Implementation (production template-pipeline pages, marketing-grade)
 * Product:     Able Software marketing site (ablespace@revops → build.ablesoftware.io)
 * Tone:        executive-clean with warmth — "enterprise you can actually talk to"
 * Narrative:   manual vs autonomous — "your team fills the gaps" vs
 *              "agents that work while you sleep". Light working sections vs
 *              deep-ink bands where the agents talk/act.
 * Typography:  Plus Jakarta Sans (display + body, vendored woff2) +
 *              JetBrains Mono (numbers, transcripts, tool-call chips).
 * Palette:     able-green #16A34A (brand anchor, --accent) · deep ink #0B1220 ·
 *              bone #FAFBF9 · slate-ink text #1C2430 · signal amber #D97706
 *              (gates/approvals) · wire-grey #E4E8E2 borders.
 * Memorable:   (1) SVG integration-web hero w/ pulse motion (reduced-motion gated)
 *              (2) voice-call transcript band w/ inline tool-call chips (ink, mono)
 *              (3) braid cascade + approval-gate diagram (/platform/automation)
 * Texture:     48px grid-line overlay + radial green glow on heroes (the live
 *              site's signature, carried over); inset-highlight on ink cards.
 * Anti-defaults: no Inter on marketing surfaces, no Tailwind-default palette,
 *              no emoji icons, no "AI-powered"/"Revolutionize" copy.
 * ────────────────────────────────────────────────────────────────────────────
 */

/* ── Fonts: Plus Jakarta Sans + JetBrains Mono (vendored in able-api) ────── */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/able-api/static/template/vendor/fonts/plus-jakarta-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/able-api/static/template/vendor/fonts/plus-jakarta-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
  src: url('/able-api/static/template/vendor/fonts/plus-jakarta-sans-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Metric-tuned fallback so font swap costs zero CLS (values for Plus Jakarta Sans vs Arial) */
@font-face {
  font-family: 'Plus Jakarta Sans Fallback';
  src: local('Arial'), local('Helvetica Neue'), local('Helvetica');
  ascent-override: 103.5%;
  descent-override: 21.5%;
  line-gap-override: 0%;
  size-adjust: 101.7%;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('/able-api/static/template/vendor/fonts/jetbrains-mono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono Fallback';
  src: local('Courier New'), local('Courier');
  ascent-override: 102%;
  descent-override: 30%;
  line-gap-override: 0%;
  size-adjust: 102.5%;
}

/* ── Brand token overrides (canonical names only — never --theme_*) ──────── */
:root {
  --accent: #16A34A;
  --accent-hover: #15803D;
  --accent-active: #166534;
  --accent-soft: #DCFCE7;
  --on-accent: #ffffff;

  --surface-base: #FAFBF9;          /* bone */
  --surface-card: #ffffff;
  --surface-subtle: #F2F5F1;
  --surface-inverse: #0B1220;       /* deep ink — voice/automation bands */

  --text-primary: #1C2430;          /* slate-ink */
  --text-secondary: #46505C;
  --text-muted: #6B7480;

  --border-subtle: #EEF1EC;
  --border-default: #E4E8E2;        /* wire-grey */
  --border-strong: #CDD4CC;

  --warning: #D97706;               /* signal amber — gates/approvals accents */

  --font-sans: 'Plus Jakarta Sans', 'Plus Jakarta Sans Fallback', -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'JetBrains Mono Fallback', monospace;
  /* Blueprint-consumed typography aliases — able-empty-state (and friends)
     reference --font-display/--font-body/--font-ui with a literal `serif`
     fallback; bind them to the brand sans so no blueprint falls back to Times. */
  --font-display: var(--font-sans);
  --font-body: var(--font-sans);
  --font-ui: var(--font-sans);

  /* Marketing-local tokens (page CSS may reference; mode-agnostic by design) */
  --rv-ink: #0B1220;
  --rv-ink-2: #111A2B;
  --rv-glow: rgba(22, 163, 74, 0.16);
  --rv-grid-line: rgba(28, 36, 48, 0.05);
  --rv-grid-line-ink: rgba(250, 251, 249, 0.06);
  --rv-amber: #D97706;
}

/* Dark mode: marketing pages keep semantic-token discipline; the few explicit
   ink bands declare their own colors so they read identically in both modes. */
:root[data-theme="dark"] {
  --rv-glow: rgba(22, 163, 74, 0.22);
}
/* marketing header: flip the glass surface in dark (text follows semantic tokens) */
:root[data-theme="dark"] .mk-header {
  background: rgba(13, 17, 23, 0.85);
  border-bottom-color: rgba(250, 251, 249, 0.08);
}
:root[data-theme="dark"] .mk-burger-menu {
  background: #161B22;
  border-color: rgba(250, 251, 249, 0.12);
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--font-base, 16px);
  background: var(--surface-base);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-weight: 700;
  letter-spacing: -0.02em;
  color: inherit;
}

/* Numbers / stats / transcript text ride the mono family sitewide */
.rv-num, .stat-num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* ── Shared marketing chrome (used by marketing-shell + pages) ──────────── */
.rv-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--tap-target, 44px);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-lg);
  font-weight: 600;
  font-size: var(--font-sm);
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background-color var(--transition-base) var(--ease-enter),
              border-color var(--transition-base) var(--ease-enter),
              box-shadow var(--transition-base) var(--ease-enter);
}
.rv-btn--primary {
  /* --accent-hover (#15803D) as the resting bg: white text on #16A34A is 3.3:1 — fails AA */
  background: var(--accent-hover);
  color: var(--on-accent);
  box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.12) inset, var(--shadow-sm);
}
.rv-btn--secondary {
  background: transparent;
  color: var(--text-primary);
  border-color: var(--border-strong);
}
.rv-btn--ghost-ink {
  background: rgba(250, 251, 249, 0.08);
  color: #FAFBF9;
  border-color: rgba(250, 251, 249, 0.22);
}
@media (hover: hover) and (pointer: fine) {
  .rv-btn--primary:hover { background: var(--accent-active); }
  .rv-btn--secondary:hover { border-color: var(--accent); color: var(--accent-hover); }
  .rv-btn--ghost-ink:hover { background: rgba(250, 251, 249, 0.16); }
}

.rv-eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--font-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-hover);
  margin-bottom: var(--space-3);
}
.rv-eyebrow--ink { color: #4ADE80; }

/* Signature texture: 48px grid overlay + radial green glow (apply to a section root) */
.rv-grid-bg {
  background-image:
    radial-gradient(ellipse 60% 50% at 50% 0%, var(--rv-glow), transparent 70%),
    linear-gradient(var(--rv-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--rv-grid-line) 1px, transparent 1px);
  background-size: 100% 100%, 48px 48px, 48px 48px;
}
.rv-grid-bg--ink {
  background-color: var(--rv-ink);
  background-image:
    radial-gradient(ellipse 60% 50% at 50% 0%, rgba(22, 163, 74, 0.25), transparent 70%),
    linear-gradient(var(--rv-grid-line-ink) 1px, transparent 1px),
    linear-gradient(90deg, var(--rv-grid-line-ink) 1px, transparent 1px);
  background-size: 100% 100%, 48px 48px, 48px 48px;
}

/* able-cta-band buttons: brand-consistent on jade across ALL marketing pages
   (the blueprint default is editorial copper) */
able-cta-band a.primary {
  display: inline-flex; align-items: center; min-height: var(--tap-target, 44px);
  padding: var(--space-3) var(--space-5); border-radius: var(--radius-lg);
  background: #FAFBF9; color: #14532D; font-weight: 700; text-decoration: none;
}
able-cta-band a.secondary {
  display: inline-flex; align-items: center; min-height: var(--tap-target, 44px);
  padding: var(--space-3) var(--space-5); border-radius: var(--radius-lg);
  background: transparent; color: #FAFBF9; border: 1px solid rgba(250, 251, 249, 0.4);
  font-weight: 600; text-decoration: none;
}
able-cta-band h2 { color: #FAFBF9; }
able-cta-band p { color: rgba(250, 251, 249, 0.85); }
@media (hover: hover) and (pointer: fine) {
  able-cta-band a.primary:hover { background: #ffffff; }
  able-cta-band a.secondary:hover { background: rgba(250, 251, 249, 0.12); }
}

/* ── site-shell bridge ──────────────────────────────────────────────────────
   The prospect-landing + contact pages keep THIS theme (revops-marketing — their
   body uses .rv-* utilities + the --rv-* glow grid) but render Victor's shared
   chrome via `shell: site-shell`. site-shell reads a few tokens that live only in
   app-theme; mirror them here so the header/footer render correctly. Copied
   verbatim from app-theme — keep in sync if app-theme changes them. ───────── */
:root {
  --asio-shadow-soft:   0 4px 6px -1px hsl(220 13% 10% / 0.05), 0 2px 4px -1px hsl(220 13% 10% / 0.03);
  --asio-shadow-medium: 0 10px 15px -3px hsl(220 13% 10% / 0.08), 0 4px 6px -2px hsl(220 13% 10% / 0.04);
  --asio-shadow-large:  0 20px 25px -5px hsl(220 13% 10% / 0.1), 0 10px 10px -5px hsl(220 13% 10% / 0.04);
  --asio-ink-deep:      #363d49;
  --asio-gradient-hero: linear-gradient(135deg, #12873d 0%, #21c45d 50%, #25da67 100%);
  --tap-target:  44px;
  --safe-top:    env(safe-area-inset-top,    0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left:   env(safe-area-inset-left,   0px);
  --safe-right:  env(safe-area-inset-right,  0px);
}