/* voAIce brand guide (voaice.com/brand) layer for /, /es and /try-olivia.
   Loaded after each page's inline styles. Rules here:
   - system font stack only; sentence-case labels (no uppercase transforms)
   - light and dark are co-equal (prefers-color-scheme), every surface opaque so
     text contrast is measurable and ≥ 4.5:1
   - the OliviaAI gradient stays on the device mark and OliviaAI actions
     (.olivia-mic, .olivia-action); everything else is solid ink or voAIce Blue.
   `html` prefixes outrank the Tailwind CDN sheet, which is injected later. */
:root {
  color-scheme: light dark;
  --font-system: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --action: #0071e3;
  --action-hover: #0062c4;
  /* dark (the pages' original ground), surfaces flattened to opaque */
  --bg-0: #0a0a0f;
  --bg-1: #111118;
  --surface-card: #141419;
  --surface-card-hover: #1c1c21;
  --surface-inset: #1c1c22;
  --surface-chip: #0b0b12;
  --stroke: rgba(255,255,255,0.12);
  --text-0: #ffffff;
  --text-1: #c7c7d1;
  --text-2: #a1a1ab;
  --accent: #a99bff;
  --accent-2: #6cbcff;
  --accent-on-surface: #a99bff;
  --tile-purple-bg: #221d3d; --tile-purple-fg: #c4a6ff;
  --tile-green-bg: #14281b;  --tile-green-fg: #6dd380;
  --tile-blue-bg: #13243a;   --tile-blue-fg: #7cc4ff;
  --tile-orange-bg: #2e2111; --tile-orange-fg: #ffb554;
  --tile-red-bg: #2e1614;    --tile-red-fg: #ff8a80;
}
@media (prefers-color-scheme: light) {
  :root {
    --bg-0: #fbfbfd;
    --bg-1: #f5f5f7;
    --bg-2: #ffffff;
    --surface-card: #ffffff;
    --surface-card-hover: #f5f5f7;
    --surface-inset: #f5f5f7;
    --surface-chip: #ffffff;
    --stroke: rgba(0,0,0,0.1);
    --text-0: #1d1d1f;
    --text-1: #424245;
    --text-2: #6e6e73;
    --accent: #0066cc;
    --accent-2: #0066cc;
    --accent-on-surface: #0066cc;
    --ok: #248a3d;
    --tile-purple-bg: #efeafd; --tile-purple-fg: #5b2fc9;
    --tile-green-bg: #e6f4ea;  --tile-green-fg: #1e7a34;
    --tile-blue-bg: #e5f0fc;   --tile-blue-fg: #0058b0;
    --tile-orange-bg: #fdf0df; --tile-orange-fg: #9a5200;
    --tile-red-bg: #fde9e7;    --tile-red-fg: #c0281c;
  }
}

* { font-family: var(--font-system); }
code, kbd, .mono { font-family: "SF Mono", SFMono-Regular, ui-monospace, Menlo, monospace; }
body { background: var(--bg-0); color: var(--text-0); }
body::before { display: none; }

/* No decorative gradient field. */
.ambient { display: none; }

/* Sentence case everywhere; brand names keep their own casing. */
html .uppercase, html .prod-tag, html .scene-chip, html .new-pill, html .soon-pill,
html .stock-chip, html .mock-hours-grid .hcell .d { text-transform: none; letter-spacing: 0; }

/* Gradient-clipped text is not used on words; solid ink instead. */
html .grad-text { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--text-0); }

/* Text-on-ground utilities that hard-coded white. */
html .text-white { color: var(--text-0); }
html .hover\:text-white:hover, html .group:hover .group-hover\:text-white { color: var(--text-0); }
html .bg-white\/5, html .bg-white\/10, html .hover\:bg-white\/5:hover, html .hover\:bg-white\/10:hover { background-color: var(--surface-inset); }
html .border-white\/5, html .border-white\/8, html .border-white\/10, html .border-white\/15 { border-color: var(--stroke); }

/* Primary action: voAIce Blue, 10px corners, 44px+ target. */
html .btn-primary {
  background: var(--action); color: #fff; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px;
  box-shadow: none; text-decoration: none;
}
html .btn-primary:hover { background: var(--action-hover); color: #fff; }
/* OliviaAI actions keep the OliviaAI gradient. */
html .btn-grad, html .olivia-action { background: linear-gradient(135deg, #7c3aed 0%, #0071e3 100%); color: #fff; min-height: 48px; border-radius: 10px; }

/* Opaque content surfaces (glass is chrome only). */
.card, .path-card, .mock-stage { background: var(--surface-card); border-color: var(--stroke); }
.path-card:hover, .card-hover:hover { background: var(--surface-card-hover); }
.mock-stage::before { display: none; }
.mock-card, .mock-action, .rule-chip, .scene-chip, .lang-chip, .action-card,
.mock-bubble.in, .bubble-in, .input-dark, .panel { background: var(--surface-inset); border-color: var(--stroke); }
.input-dark { color: var(--text-0); }
.rule-chip .q { color: var(--text-0); }
.lang-chip { color: var(--text-1); }
.lang-chip-more { background: var(--tile-purple-bg); color: var(--tile-purple-fg); }
.mock-bubble.out, .bubble-out { background: var(--action); color: #fff; }
.step-num { background: var(--surface-inset); color: var(--text-0); border: 1px solid var(--stroke); box-shadow: none; }
.path-card .path-arrow { color: var(--text-2); }
.path-card:hover .path-arrow { color: var(--text-0); }
.mock-action.with-photo .photo { background: linear-gradient(180deg, #1c1d2e 0%, #14152a 55%, #0b0c1c 100%); }
.mock-action.with-photo .photo .stock-chip { background: #0058b0; }
.mock-hours-grid { background: var(--surface-inset); }
.mock-hours-grid .hcell { background: var(--surface-card); border-color: var(--stroke); }
.mock-hours-grid .hcell.today { background: var(--action); border-color: var(--action); }
.mock-hours-grid .hcell.today .d, .mock-hours-grid .hcell.today .h { color: #fff; }

/* Channel/status icon tiles: opaque tint + accessible glyph tone. */
.icon-tile, .action-icon { background: var(--tile-purple-bg); color: var(--tile-purple-fg); }
.icon-tile.green  { background: var(--tile-green-bg);  color: var(--tile-green-fg); }
.icon-tile.blue   { background: var(--tile-blue-bg);   color: var(--tile-blue-fg); }
.icon-tile.orange, .mock-action.with-photo .body .action-icon-sm { background: var(--tile-orange-bg); color: var(--tile-orange-fg); }
.icon-tile.red    { background: var(--tile-red-bg);    color: var(--tile-red-fg); }
.tone-green { color: var(--tile-green-fg); } .tone-red { color: var(--tile-red-fg); }
.tone-blue { color: var(--tile-blue-fg); } .tone-purple { color: var(--tile-purple-fg); }
.tone-orange { color: var(--tile-orange-fg); }

/* Product tags: neutral chips, sentence case. */
.prod-tag, .prod-tag.dealer, .prod-tag.phone { background: var(--surface-inset); border-color: var(--stroke); color: var(--text-1); }
.new-pill { background: var(--tile-green-bg); border-color: transparent; color: var(--tile-green-fg); box-shadow: none; }
.soon-pill { background: var(--tile-orange-bg); border-color: transparent; color: var(--tile-orange-fg); }

/* Footer: "© voAIce Corporation" in one solid colour. */
.site-legal .wordmark { color: var(--text-0); font-weight: 600; }
.mock-action.with-photo .photo .price-chip { background: #0b0b12; color: #fff; }
.chan-chip, .mock-summary, .expiry-notice, .composer input, .mock-action.with-hours .body .action-icon-sm { background: var(--surface-inset); border-color: var(--stroke); }
.mock-action.with-hours .body .action-icon-sm { background: var(--tile-blue-bg); color: var(--tile-blue-fg); }
.composer { background: var(--bg-0); }
.composer input { color: var(--text-0); }
.window-hint .x:hover { background: var(--surface-inset); color: var(--text-0); }
/* DealerCRM wordmark: ink/white with "CRM" on the accessible blue text tone. */
.loader { background: var(--bg-0); }
.loader-mark { color: var(--text-0); }
.loader-mark .crm { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: #4da3ff; }
@media (prefers-color-scheme: light) { .loader-mark .crm { color: #0066cc; } }
.timeline-scroll { scrollbar-color: var(--stroke) transparent; }
/* Phone mockup: neutral depth, no purple/blue glow. */
@media (min-width: 1024px) { .mock-stage { box-shadow: 0 0 0 1px var(--stroke), 0 30px 80px rgba(0,0,0,0.22), 0 8px 20px rgba(0,0,0,0.12); } }
/* Lucide outline icons render inline; keep them on the text line. */
.lucide-icon { display: inline-block; flex-shrink: 0; vertical-align: -0.125em; }
/* No pill shapes: buttons 10px, badges/chips 8px. Status dots and the OliviaAI
   mic control (.olivia-mic) stay circular. */
html a.rounded-full, html button.rounded-full, html a.rounded-2xl, html button.rounded-2xl,
html .btn-primary, html .btn-grad, html .olivia-action, html .dv-pill, html .composer button,
html .composer input, html .input-dark { border-radius: 10px; }
html div.rounded-full:not(.olivia-mic), html span.rounded-full:not([class*="w-1"]):not([class*="w-2"]),
html .new-pill, html .soon-pill, html .prod-tag, html .lang-chip, html .scene-chip, html .chan-chip,
html .stock-chip, html .price-chip, html .mock-action.with-photo .photo .price-chip { border-radius: 8px; }