/* LeanTools design tokens — dark theme (the product ships dark-only).
   Values are taken directly from the approved mockups in /screens.
   Import once at the app root; reference semantic names, never raw hex, in components.
   The fonts (Space Grotesk, Geist, Geist Mono) are linked once by the layout. */

:root {
  color-scheme: dark;

  /* ---------- Brand ---------- */
  --lt-brand-deep: #0A55C9;
  --lt-brand-core: #0B7BF7;
  --lt-brand-bright: #2AB6FF;
  --lt-brand-navy: #071A3D;              /* wordmark on light backgrounds */
  --lt-gradient-brand: linear-gradient(90deg, #0879F5 0%, #12AAFF 100%);          /* meters, progress, bars */
  --lt-gradient-mark: linear-gradient(64deg, #0A55C9 0%, #0B7BF7 50%, #2AB6FF 100%); /* logo mark only */
  --lt-gradient-headline: linear-gradient(92deg, #A9D8FF 0%, #2AB6FF 45%, #0B7BF7 100%); /* landing hero line 2 only */

  /* ---------- Backgrounds & surfaces (darkest → lightest) ---------- */
  --lt-bg: #060A12;                 /* app + landing canvas */
  --lt-bg-footer: #05080F;
  --lt-bg-sidebar: #080D18;
  --lt-surface-well: #070C16;       /* code blocks, text inputs, key/endpoint fields */
  --lt-surface-hero: #0A101B;       /* hero cards / showcase panels (usually + glow + dots) */
  --lt-surface-1: #0B111D;          /* default card, search field, stat tile */
  --lt-surface-drawer: #0A0F1A;     /* right-hand configure sheet */
  --lt-surface-2: #0D1422;          /* raised block inside a card: toggle row, credential box */
  --lt-surface-3: #111A2A;          /* ghost button, chip, small tile */
  --lt-surface-hover: #0F1828;      /* table row / card hover */
  --lt-surface-selected: #11203A;   /* active sidebar item */
  --lt-surface-control-on: #172338; /* active segment in a segmented control */
  --lt-surface-disabled: #08101B;   /* disabled / "off" tool card */

  /* ---------- Borders ---------- */
  --lt-border-subtle: #121B2C;      /* table row dividers */
  --lt-border: #182236;             /* default card border */
  --lt-border-panel: #1A2438;       /* page-level panels, header controls */
  --lt-border-control: #223047;     /* buttons, inputs, chips */
  --lt-border-strong: #293850;      /* emphasised control, switch-off track */
  --lt-border-hover: #33445F;
  --lt-divider: #152034;            /* section dividers, table header rule */

  /* ---------- Text ---------- */
  --lt-text: #EDF2FA;               /* primary · 16.8:1 on surface-1 */
  --lt-text-secondary: #A3AEC2;     /* body, descriptions · 8.4:1 */
  --lt-text-tertiary: #7E8BA2;      /* captions, labels, table headers · 5.5:1 */
  --lt-text-faint: #6A7892;         /* code comments only (<4.5:1 on some surfaces) */
  --lt-text-on-primary: #FFFFFF;
  --lt-text-separator: #394860;     /* "/" in breadcrumbs */

  /* ---------- Interactive / accent ---------- */
  --lt-primary: #0A6CE8;            /* primary button fill (white label = 4.9:1) */
  --lt-primary-hover: #0B61D6;            /* darker on hover keeps white label ≥ 4.5:1 */
  --lt-accent: #4DB3FF;             /* links, active icon, accent text · 8.3:1 */
  --lt-accent-hover: #7CC7FF;
  --lt-accent-line: #2E9BFF;        /* active tab underline, focused input border */
  --lt-accent-fill: #0B73F7;        /* switch "on" track, checklist done dot, selected ring */
  --lt-accent-soft: rgba(18, 160, 255, 0.10);       /* icon tile bg, soft highlight */
  --lt-accent-soft-strong: rgba(18, 160, 255, 0.16);
  --lt-accent-border: rgba(42, 177, 250, 0.32);     /* icon tile / chip border */
  --lt-accent-border-strong: rgba(42, 177, 250, 0.55); /* selected card border */
  --lt-accent-ring: 0 0 0 3px rgba(18, 160, 255, 0.08); /* selected card halo */
  --lt-accent-text-soft: #A9D8FF;   /* text inside accent-soft pills */
  --lt-focus: #4DB3FF;

  /* ---------- Status (never use for branding) ---------- */
  --lt-success: #3DDC97;            /* healthy, connected, 200 */
  --lt-success-glow: rgba(61, 220, 151, 0.75);
  --lt-warning: #F2B35B;            /* degraded, expiring, 429, token expired, reload threshold */
  --lt-warning-soft: rgba(242, 179, 91, 0.12);
  --lt-warning-border: rgba(242, 179, 91, 0.40);
  --lt-danger: #FF8A7A;             /* destructive actions, revoke, disconnect */
  --lt-danger-border: rgba(255, 138, 122, 0.40);
  --lt-info: #B39DFF;               /* held/pending approval, BETA, WRITE, TEST badges */
  --lt-info-border: rgba(179, 157, 255, 0.40);

  /* ---------- Data visualisation (validated for CVD on --lt-surface-1) ---------- */
  --lt-chart-1: #2A80E2;            /* blue — always the largest / primary series */
  --lt-chart-2: #D55078;            /* rose */
  --lt-chart-3: #8A63DE;            /* violet */
  --lt-chart-4: #05A388;            /* teal */
  --lt-chart-5: #CB8117;            /* amber */
  --lt-chart-other: #3A4760;        /* "Other" bucket */
  --lt-chart-grid: #141D2F;
  --lt-chart-baseline: #24324A;
  --lt-chart-spark: #46546E;        /* sparkline stroke; end dot takes status/accent colour */

  /* ---------- Benchmark series: the two RAG baselines in low-saturation slate so LeanMemory's green is the only colour;
                LeanMemory's three stages are one hue in three lightness steps, so a stacked column reads as one system
                getting better. Pairs validated for CVD on surface-1. ---------- */
  --lt-bench-conv: #56647C;         /* conventional RAG: muted slate, darker */
  --lt-bench-sota: #9AA3B4;         /* state-of-the-art RAG: muted slate, lighter */
  --lt-bench-mem-1: #15935F;        /* LeanMemory, first sight */
  --lt-bench-mem-2: #34D399;        /* after studying the questions (= the product accent) */
  --lt-bench-mem-3: #9BF0CB;        /* after being taught */

  /* ---------- Code syntax (mono snippets) ---------- */
  --lt-code-keyword: #6CB6FF;       /* commands, flags */
  --lt-code-string: #9FE0C6;        /* URLs, values */
  --lt-code-var: #F2B35B;           /* $ENV references */
  --lt-code-comment: #6A7892;

  /* ---------- Auxiliary neutrals (small, specific uses seen in the mockups) ---------- */
  --lt-header-border: #111A2B;      /* app header bottom rule */
  --lt-nav-hover: #101A2B;          /* sidebar item hover */
  --lt-ghost-hover: #172239;        /* ghost button hover fill */
  --lt-track: #131C2D;              /* meter / inline-bar tracks, sidebar right edge */
  --lt-chip: #131C2C;               /* chips, count badges, token-input chips */
  --lt-chip-border: #202C42;
  --lt-kbd-border: #25334B;         /* ⌘K hint */
  --lt-switch-off: #1A2539;         /* switch "off" track fill */
  --lt-skeleton: #1C283D;           /* skeleton / placeholder bars */
  --lt-tile: #141E30;               /* monogram tile (active) */
  --lt-tile-border: #2D3C55;
  --lt-border-landing: #1E2A40;     /* landing cards, code panels */
  --lt-ring-todo: #33425B;          /* checklist step not started */
  --lt-popover-border: #2B3A53;
  --lt-popover-bg: rgba(18, 23, 34, 0.96);
  --lt-avatar-1: #1E3354;           /* initials avatars — tinted, cycle by user id */
  --lt-avatar-2: #3A2E4A;
  --lt-avatar-3: #2E3F2B;
  --lt-avatar-4: #4A3A26;
  --lt-avatar-5: #1F3B45;
  --lt-avatar-6: #45283A;
  --lt-avatar-7: #2B3140;

  /* ---------- Product line (one accent per product: tints its line-icon mark, glows, eyebrows and feature icons;
                used sparingly, never as large fills) ---------- */
  --lt-product-memory: #34D399;     /* emerald */
  --lt-product-browser: #38BDF8;    /* sky */
  --lt-product-machine: #FACC15;    /* yellow */
  --lt-product-vision: #2DD4BF;      /* teal */
  --lt-product-tracker: #FB923C;    /* orange */
  --lt-product-connect: #C084FC;    /* purple */
  --lt-product-data: #60A5FA;       /* blue */
  --lt-product-model: #F472B6;      /* pink */
  --lt-hairline: rgba(237, 242, 250, 0.09);   /* glass edges: photos, floating panels */
  --lt-glass: rgba(9, 14, 24, 0.74);          /* floating panels over photos (+ backdrop blur) */

  /* ---------- Typography ---------- */
  --lt-font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --lt-font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --lt-font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---------- Radius ---------- */
  --lt-radius-2xs: 4px;   /* tiny badges */
  --lt-radius-xs: 6px;    /* kbd, count badge, segment */
  --lt-radius-sm: 8px;    /* small buttons, icon buttons 30–32px */
  --lt-radius-md: 10px;   /* buttons, inputs, list rows */
  --lt-radius-lg: 12px;   /* grouped fields, sub-cards */
  --lt-radius-xl: 14px;   /* cards (console) */
  --lt-radius-2xl: 16px;  /* dashboard cards, stat tiles */
  --lt-radius-3xl: 20px;  /* landing cards */
  --lt-radius-4xl: 24px;  /* landing panels, pricing cards */
  --lt-radius-pill: 999px;

  /* ---------- Elevation & effects ---------- */
  --lt-shadow-primary: inset 0 1px 0 rgba(255,255,255,0.18), 0 0 0 1px rgba(42,177,250,0.35), 0 8px 24px rgba(11,115,247,0.35);
  --lt-shadow-primary-lg: inset 0 1px 0 rgba(255,255,255,0.20), 0 0 0 1px rgba(42,177,250,0.45), 0 12px 32px rgba(11,115,247,0.40);
  --lt-shadow-popover: 0 16px 40px rgba(0,0,0,0.55);
  --lt-shadow-drawer: -40px 0 90px rgba(0,0,0,0.60);
  --lt-shadow-showcase: 0 50px 140px rgba(0,0,0,0.60), inset 0 1px 0 rgba(255,255,255,0.06);
  --lt-inset-highlight: inset 0 1px 0 rgba(255,255,255,0.04);
  --lt-scrim: rgba(3, 5, 8, 0.55);  /* + backdrop-filter: blur(2px) */
  --lt-texture-dots: radial-gradient(circle, rgba(237,242,250,0.06) 1px, transparent 1.4px) 0 0 / 22px 22px;
  --lt-glow-card: radial-gradient(420px 220px at 100% 0%, rgba(18,160,255,0.12), transparent 70%);
  --lt-glow-hero: radial-gradient(1000px 560px at 50% -6%, rgba(18,140,255,0.26), transparent 70%);

  /* ---------- Layout ---------- */
  --lt-sidebar-w: 248px;
  --lt-header-h: 64px;
  --lt-page-pad-x: 48px;
  --lt-page-pad-top: 36px;
  --lt-drawer-w: 620px;
  --lt-landing-max: 1200px;
  --lt-landing-nav-h: 80px;
  --lt-section-pad-y: 120px;

  /* ---------- Motion ---------- */
  --lt-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --lt-dur-fast: 120ms;
  --lt-dur: 200ms;
  --lt-dur-slow: 320ms;
}

/* Global base */
html, body { background: var(--lt-bg); color: var(--lt-text); font-family: var(--lt-font-sans); -webkit-font-smoothing: antialiased; }
:focus-visible { outline: 2px solid var(--lt-focus); outline-offset: 2px; }
a { color: var(--lt-accent); text-decoration: none; }
a:hover { color: var(--lt-accent-hover); }
.lt-num { font-variant-numeric: tabular-nums; }

@keyframes lt-pulse { 0% { transform: scale(.55); opacity: .85 } 100% { transform: scale(2.3); opacity: 0 } }   /* "listening" rings */
@keyframes lt-flow { to { stroke-dashoffset: -56 } }                                                            /* data-flow dashes */
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }