/* Shared base for every section. Values are the limeade app's dark-mode tokens
   (app/assets/tailwind/dark_mode.css). Sections add their own prefixed classes. */

@font-face { font-family: "Inter"; font-weight: 400; font-display: swap; src: url("fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 500; font-display: swap; src: url("fonts/inter-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 600; font-display: swap; src: url("fonts/inter-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 700; font-display: swap; src: url("fonts/inter-latin-700-normal.woff2") format("woff2"); }
/* Headlines: Geist (OFL), one variable file for every weight. Body text stays Inter, like the app. */
@font-face { font-family: "Geist"; font-weight: 100 900; font-display: swap; src: url("fonts/geist-latin-wght-normal.woff2") format("woff2"); }

:root {
  color-scheme: dark;

  /* Surfaces, low to high */
  --sunk: #060708;
  --canvas: #0a0b0d;   /* a step under the app's #0e1013 so the hero scene and cards lift off the page */
  --sidebar: #111419;
  --card: #15181d;
  --raised: #1d2127;
  --field: #1b2027;
  --line: #23272d;
  --line-soft: #1c2026;
  --line-strong: #363c45;

  /* Text: gray, never pure white; only links reach #f3f4f6 */
  --title: #e8ebef;
  --ink: #d9dde3;
  --body-strong: #c2c8cf;
  --body: #a3abb5;
  --muted: #8f98a3;   /* lowest for small text */
  --faint: #5f6773;   /* decoration only, never text */
  --link: #f3f4f6;

  /* Brand: lime is a SIGNAL (logo, live, focus, the active thing), never a fill for chrome */
  --lime: #6fb541;
  --lime-ink: #9fd77a;
  --lime-soft: rgb(111 181 65 / 0.14);
  --lime-line: rgb(111 181 65 / 0.32);

  /* Semantic roles: base / soft / line / ink */
  --info: #3b7dd8;     --info-soft: rgb(59 125 216 / 0.16);  --info-line: rgb(59 125 216 / 0.36);  --info-ink: #8fb6f0;
  --warning: #d9930d;  --warning-soft: rgb(217 147 13 / 0.16); --warning-line: rgb(217 147 13 / 0.36); --warning-ink: #f0b84a;
  --success: #1f9d6f;  --success-soft: rgb(31 157 111 / 0.16); --success-line: rgb(31 157 111 / 0.36); --success-ink: #5ad1a4;
  --critical: #d64545; --critical-soft: rgb(214 69 69 / 0.16); --critical-line: rgb(214 69 69 / 0.36); --critical-ink: #f08b8b;

  /* Identity fills (status palette): white text clears 4.5:1. People = circle avatar, agents = rounded square. */
  --id-blue: #3a6ab0; --id-purple: #794ab2; --id-teal: #2e7289; --id-amber: #936528;
  --id-pink: #b2426e; --id-green: #307759; --id-indigo: #4e55b6; --id-orange: #aa5a2c;

  /* Primary action: light fill, dark text (the app's dark-mode primary) */
  --primary: #ededed; --primary-hover: #ffffff; --primary-fg: #141414;

  --shadow-card: 0 1px 0 rgb(255 255 255 / 0.03) inset, 0 24px 48px -28px rgb(0 0 0 / 0.75);
  --shadow-overlay: 0 4px 12px -2px rgb(0 0 0 / 0.5), 0 24px 48px -16px rgb(0 0 0 / 0.7);

  --ease: cubic-bezier(0.2, 0, 0, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 320ms;

  --font: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-display: "Geist", "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;

  --wrap: 1200px;
  --gutter: clamp(16px, 4vw, 40px);
  --radius-sm: 8px; --radius: 12px; --radius-lg: 18px; --radius-xl: 24px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 72px; }
body {
  margin: 0; background: var(--canvas); color: var(--body);
  font-family: var(--font); font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; overflow-x: clip;
}
::selection { background: var(--lime-line); }
a { color: var(--link); }
img, svg, canvas { display: block; max-width: 100%; }
h1, h2, h3, h4, p { margin: 0; }
h1, h2, h3 { font-family: var(--font-display); color: var(--title); font-weight: 650; letter-spacing: -0.025em; line-height: 1.1; text-wrap: balance; }
:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; border-radius: 4px; }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.mono { font-family: var(--mono); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Buttons: >=44px targets */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px;
  border-radius: 10px; font: inherit; font-size: 15px; font-weight: 600; text-decoration: none; cursor: pointer; border: 1px solid transparent;
  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.btn-primary { background: var(--primary); color: var(--primary-fg); }
.btn-primary:hover { background: var(--primary-hover); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); font-weight: 500; }
.btn-ghost:hover { border-color: var(--faint); color: var(--link); }
.btn .arrow { transition: transform var(--dur-base) var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }

/* Reveal-on-scroll hook any section may use: add .reveal; base.js adds .is-in when visible. */
.reveal { opacity: 0; transform: translateY(12px); transition: opacity 600ms var(--ease), transform 600ms var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
}

/* ---------------------------------------------------------------------------
   App grammar (from limeade-launchpad application.css + helpers): the micro
   details that make the app feel crafted. Use these instead of inventing new ones.
   --------------------------------------------------------------------------- */

/* Active / selected / running surface (sidebar active item, filters, run states):
   the tone's tint at the left fading into the card by 70%, a tinted hairline. Set --wash. */
.wash { --wash: var(--lime);
  background-color: transparent;  /* fades into whatever it sits on: a card, or the page ground */
  background-image: linear-gradient(to right, color-mix(in oklab, var(--wash) 16%, transparent), transparent 70%);
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--wash) 24%, var(--line)), inset 0 1px 0 rgb(255 255 255 / 0.04); }

/* Pill (ui_pill): 20px, soft wash, the tone's ink, a ring in its line, a whisper of light on top. */
.pill { display: inline-flex; align-items: center; gap: 6px; height: 20px; padding: 0 10px; border-radius: 999px;
  font-size: 11.5px; font-weight: 500; line-height: 20px; white-space: nowrap;
  background: rgb(91 102 112 / 0.18); color: #aab4bc;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.06), inset 0 0 0 1px color-mix(in oklab, currentColor 22%, transparent); }
.pill-lime { background: var(--lime-soft); color: var(--lime-ink); }
.pill-info { background: var(--info-soft); color: var(--info-ink); }
.pill-warning { background: var(--warning-soft); color: var(--warning-ink); }
.pill-success { background: var(--success-soft); color: var(--success-ink); }
.pill-critical { background: var(--critical-soft); color: var(--critical-ink); }

/* Wash badge (ui_wash_badge): a group's state, square-ish, dot + label, tint fading into the card. */
.badge { --wash: var(--lime); display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 8px; border-radius: 6px;
  font-size: 12px; font-weight: 600; white-space: nowrap; color: color-mix(in oklab, var(--wash) 55%, white);
  background-color: var(--card);
  background-image: linear-gradient(to right, color-mix(in oklab, var(--wash) 18%, var(--card)), var(--card) 85%);
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--wash) 26%, var(--line)), 0 1px 2px rgb(0 0 0 / 0.3); }
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--wash); flex: none; }
.badge-solid { background: color-mix(in oklab, var(--wash) 70%, black); color: #fff; box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.12), 0 1px 2px rgb(0 0 0 / 0.3); }
.badge-solid::before { background: rgb(255 255 255 / 0.85); }

/* Tones for .wash and .badge; after both so `.badge.wash-info` takes the tone. */
.wash-info { --wash: var(--info); } .wash-warning { --wash: var(--warning); }
.wash-success { --wash: var(--success); } .wash-critical { --wash: var(--critical); }

/* Live dot (ui_live_dot): the one animated mark. */
.live-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--lime); flex: none;
  box-shadow: 0 0 0 0 rgb(111 181 65 / 0.5); animation: live-ring 2.2s var(--ease) infinite; }
section:not([data-inview]) .live-dot { animation-play-state: paused; }
@keyframes live-ring { 70% { box-shadow: 0 0 0 6px rgb(111 181 65 / 0); } 100% { box-shadow: 0 0 0 0 rgb(111 181 65 / 0); } }

/* Ref (ui_ref): mono id; inside a hovered/focused row it takes the brand wash, 4px past each side. */
.ref { font-family: var(--mono); font-size: 0.86em; color: var(--muted); border-radius: 4px;
  transition: background-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
:is(li, tr, .row, a):is(:hover, :focus-within) .ref, .ref.is-on { background: var(--lime-soft); box-shadow: -4px 0 0 var(--lime-soft), 4px 0 0 var(--lime-soft); color: var(--lime-ink); }

/* Selected canvas card (fc-selected + fc-halo) and a live wire (fc-edge-on + fc-flow). */
.is-picked { box-shadow: 0 0 0 1.5px var(--lime), 0 0 0 5.5px var(--lime-line), var(--shadow-card); }
.wire-on { stroke: var(--lime); stroke-width: 2; stroke-dasharray: 6 5; animation: wire-flow 900ms linear infinite; }
@keyframes wire-flow { to { stroke-dashoffset: -11; } }

/* Surfaces: a 1px top sheen so dark cards read as lit from above, not flat. */
.sheen { box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.045), var(--shadow-card); }

/* Avatars (ui_avatar): fill + a top highlight and a hairline ring; agents are rounded squares. */
.avatar { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%;
  font-size: 11px; font-weight: 600; color: #fff; flex: none;
  background-image: linear-gradient(to bottom, rgb(255 255 255 / 0.14), rgb(255 255 255 / 0) 60%);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.10), 0 1px 2px rgb(0 0 0 / 0.35); }
.avatar.agent { border-radius: 7px; }

/* Hero ground: the app canvas's dot grid (.fc-pane) as a soft pattern behind the 3D scene,
   faded out from where the town sits, plus a barely-there neutral lift under the plate. */
#hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    radial-gradient(ellipse 42% 48% at 74% 52%, rgb(255 255 255 / 0.03), transparent 70%),
    radial-gradient(circle, rgb(163 171 181 / 0.15) 1px, transparent 1.4px);
  background-size: auto, 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 72% 50%, #000 20%, transparent 78%);
  mask-image: radial-gradient(ellipse 70% 80% at 72% 50%, #000 20%, transparent 78%); }
@media (max-width: 899px) {
  #hero::before { -webkit-mask-image: radial-gradient(ellipse 90% 45% at 50% 72%, #000 20%, transparent 78%);
    mask-image: radial-gradient(ellipse 90% 45% at 50% 72%, #000 20%, transparent 78%); }
}