/* ============================================================================
   Bolo · "Lime layered" — landing-page theme
   Single source of truth for the marketing site, transcribed verbatim from the
   app's design system (Sources/Bolo/UI/BoloTheme.swift).

   Color is LAYERED, not one value: green-tinted, value-first neutrals plus a
   lime accent in FIVE roles (solid fill · soft surface · tinted line · accent-
   as-text · low-alpha glow) and a sparing mint secondary ramp. Both light and
   dark are baked. Dark is the default (:root); light is opt-in via
   [data-theme="light"], exactly like the macOS app's appearance resolution.

   Fonts: Space Grotesk (display) · Inter (body).
   ============================================================================ */

/* ---- Dark (default) -------------------------------------------------------- */
:root {
  /* Neutrals — value-first, faintly green-tinted */
  --bg:      #0e100b;   /* page canvas            */
  --bg2:     #181b13;   /* card / panel surface   */
  --bg3:     #21241b;   /* raised / hover surface */
  --line:    #363a2e;   /* hairline borders       */
  --ink:     #f2f5ed;   /* primary text           */
  --soft:    #a9aca4;   /* secondary text         */
  --faint:   #797c74;   /* tertiary text          */
  --inset:   #080a05;   /* recessed fields        */
  --kbd:     #20231b;   /* keycap fill            */

  /* Lime accent ramp — five roles */
  --accent:        #c4ee4f;   /* solid action / mark / meter */
  --accent-strong: #cef85b;   /* hover / active of the solid */
  --accent-ink:    #121900;   /* text / glyph ON an accent fill */
  --accent-soft:   #212b08;   /* tinted SURFACE */
  --accent-line:   #495a1b;   /* tinted BORDER  */
  --accent-text:   #adcc60;   /* accent legible as TEXT */
  --accent-rgb:    196, 238, 79;   /* for rgba() glows */

  /* Mint secondary ramp (analogous +30°) — success / active, used sparingly */
  --accent2:        #63fe9e;
  --accent2-strong: #98ffb8;
  --accent2-ink:    #011c0a;
  --accent2-soft:   #0d2e19;
  --accent2-line:   #23613a;
  --accent2-text:   #6ed892;

  /* Amber attention state */
  --warning: #ffc900;

  /* Elevation — deeper on dark so cards separate from the near-black canvas */
  --shadow-card: 0 1px 2px rgba(0,0,0,.40), 0 12px 32px rgba(0,0,0,.45);
  --shadow-pop:  0 8px 24px rgba(0,0,0,.35), 0 24px 64px rgba(0,0,0,.55);
}

/* ---- Light (opt-in) -------------------------------------------------------- */
[data-theme="light"] {
  --bg:      #f9fbf6;
  --bg2:     #f2f4ef;
  --bg3:     #e8ebe3;
  --line:    #dce0d6;
  --ink:     #191c12;
  --soft:    #595c53;
  --faint:   #6d7064;
  --inset:   #f1f3ed;
  --kbd:     #fdfefb;

  --accent:        #c4ee4f;
  --accent-strong: #abd32b;
  --accent-ink:    #121900;
  --accent-soft:   #e6f3ce;
  --accent-line:   #c7daa0;
  --accent-text:   #597100;   /* darkened so it holds AA as small text */
  --accent-rgb:    196, 238, 79;

  --accent2:        #63fe9e;
  --accent2-strong: #41e285;
  --accent2-ink:    #011c0a;
  --accent2-soft:   #d5f7dd;
  --accent2-line:   #a9e1b8;
  --accent2-text:   #007b3f;

  --warning: #8a6a00;   /* darkened to hold AA on the near-white canvas */

  --shadow-card: 0 1px 2px rgba(20,30,10,.05), 0 10px 28px rgba(20,30,10,.07);
  --shadow-pop:  0 8px 24px rgba(20,30,10,.08), 0 24px 60px rgba(20,30,10,.12);
}

/* ---- Fixed tokens (identical in both appearances) -------------------------- */
:root {
  /* HUD chrome — a floating overlay reads over arbitrary app content, so its
     surface is a FIXED dark olive glass in both appearances (the macOS /
     Raycast HUD convention). Lime and light text always pop. */
  --hud-surface: #14160f;
  --hud-tint:    #c4ee4f;
  --hud-ink:     #f2f5ed;
  --hud-soft:    #afb2a8;
  --hud-faint:   #83867d;
  --hud-edge:    #ffffff;

  /* The one full-strength lime "poster" moment (the hero / CTA band).
     Fixed colors — identical in light and dark. */
  --poster-surface:     #c4ee4f;
  --poster-dots:        rgba(20, 23, 11, .06);
  --poster-headline:    #15170b;
  --poster-body:        #2c2f12;
  --poster-fine:        #42460f;
  --poster-action-fill: #15170b;
  --poster-action-text: #eaf7b8;
  --poster-ghost-text:  #15170b;
  --poster-ghost-line:  rgba(20, 23, 11, .42);

  /* Shape — radius by role */
  --r-btn:   10px;
  --r-card:  16px;
  --r-panel: 22px;
  --r-pill:  999px;

  /* Spacing — 4px ramp */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-6: 24px; --s-8: 32px; --s-12: 48px; --s-16: 64px; --s-24: 96px;

  /* Type */
  --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-body:    "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-deva:    "Baloo 2", "Space Grotesk", sans-serif;

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);   /* ease-out-quint */
  --dur:      200ms;
}

/* ============================================================================
   Base
   ============================================================================ */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}

a { color: var(--accent-text); text-underline-offset: 3px; }

:where(a, button, input, [tabindex]):focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ============================================================================
   Typography
   ============================================================================ */
.display {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.5rem, 4vw + 1.5rem, 4.5rem);
  line-height: 1.04;
  letter-spacing: -0.03em;
  text-wrap: balance;
  margin: 0;
}
.h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.9rem, 2.4vw + 1rem, 2.75rem);
  line-height: 1.1;
  letter-spacing: -0.025em;
  text-wrap: balance;
  margin: 0;
}
.h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 1.18;
  letter-spacing: -0.02em;
  margin: 0;
}
.h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.125rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 0;
}
.lead   { font-size: 1.15rem; color: var(--soft); line-height: 1.6; max-width: 60ch; }
.body   { font-size: 1rem; color: var(--ink); }
.muted  { color: var(--soft); }
.small  { font-size: 0.875rem; }
.caption{ font-size: 0.78rem; color: var(--faint); }

/* A single, deliberate section kicker for the reference catalog. */
.eyebrow {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent-text);
}

.deva { font-family: var(--font-deva); font-weight: 600; }

/* Body prose lands at a readable measure */
.prose { max-width: 68ch; }

/* ============================================================================
   Buttons
   ============================================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1;
  padding: 0.7rem 1.15rem;
  border-radius: var(--r-btn);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out),
              transform var(--dur) var(--ease-out),
              color var(--dur) var(--ease-out);
}
.btn:active { transform: translateY(1px); }

/* Primary — the one prominent CTA: lime fill, near-black ink on top (13.5:1) */
.btn-primary {
  background: var(--accent);
  color: var(--accent-ink);
}
.btn-primary:hover { background: var(--accent-strong); }

/* Secondary — quiet, subordinate to primary */
.btn-secondary {
  background: var(--bg2);
  color: var(--ink);
  border-color: var(--line);
}
.btn-secondary:hover { background: var(--bg3); border-color: var(--accent-line); }

/* Ghost — text-only affordance */
.btn-ghost {
  background: transparent;
  color: var(--accent-text);
  padding-inline: 0.4rem;
}
.btn-ghost:hover { color: var(--accent-strong); }

/* ============================================================================
   Surfaces
   ============================================================================ */
.card {
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: var(--s-6);
  box-shadow: var(--shadow-card);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.3rem 0.7rem;
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  color: var(--accent-text);
  border: 1px solid var(--accent-line);
}
.chip.mint { background: var(--accent2-soft); color: var(--accent2-text); border-color: var(--accent2-line); }

/* Keycap */
.kbd {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink);
  background: var(--kbd);
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 6px;
  padding: 0.15rem 0.5rem;
  min-width: 1.6em;
  text-align: center;
}

/* ============================================================================
   HUD pill — the product's signature floating surface.
   A fixed dark olive glass with a lit top edge and a soft lime tint, so it
   reads over any background. This is what dictation looks like on screen.
   ============================================================================ */
.hud {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  padding: 0.85rem 1.15rem;
  border-radius: var(--r-panel);
  color: var(--hud-ink);
  background:
    radial-gradient(120% 140% at 50% -20%, rgba(var(--accent-rgb), .14), transparent 60%),
    linear-gradient(180deg, #1b1e14 0%, var(--hud-surface) 100%);
  border: 1px solid rgba(255, 255, 255, .07);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .10),   /* lit top edge */
    var(--shadow-pop);
}
.hud .meter { display: inline-flex; align-items: flex-end; gap: 3px; height: 22px; }
.hud .meter i {
  width: 3px;
  border-radius: 2px;
  background: var(--hud-tint);
  box-shadow: 0 0 8px rgba(var(--accent-rgb), .5);
}
.hud .label { font-size: 0.9rem; color: var(--hud-soft); }
.hud .label b { color: var(--hud-ink); font-weight: 600; }

/* ============================================================================
   Lime poster — the full-strength brand moment (hero / CTA band)
   ============================================================================ */
.poster {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-panel);
  padding: var(--s-12) var(--s-8);
  color: var(--poster-body);
  background-color: var(--poster-surface);
  background-image: radial-gradient(var(--poster-dots) 1.4px, transparent 1.4px);
  background-size: 16px 16px;
}
.poster .h1, .poster .display { color: var(--poster-headline); }
.poster .fine { color: var(--poster-fine); }
.poster .btn-poster {
  background: var(--poster-action-fill);
  color: var(--poster-action-text);
}
.poster .btn-poster:hover { background: #000; }
.poster .btn-poster-ghost {
  background: transparent;
  color: var(--poster-ghost-text);
  border: 1px solid var(--poster-ghost-line);
}

/* ============================================================================
   Glow — soft lime radial, the brand's light source (hero backdrops)
   ============================================================================ */
.glow {
  background:
    radial-gradient(60% 60% at 50% 40%, rgba(var(--accent-rgb), .22), transparent 70%);
}

/* ============================================================================
   Swatch grid (used by the reference page)
   ============================================================================ */
.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--s-3); }
.swatch {
  border: 1px solid var(--line);
  border-radius: var(--r-btn);
  overflow: hidden;
  background: var(--bg2);
}
.swatch .chipcolor { height: 60px; }
.swatch .meta { padding: var(--s-2) var(--s-3); }
.swatch .name { font-size: 0.82rem; font-weight: 600; }
.swatch .hex  { font-size: 0.72rem; color: var(--faint); font-variant-numeric: tabular-nums; }

/* ============================================================================
   Reduced motion
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}