/* ============================================================
   LeanScale Design System — FOUNDATIONS  (v2.0)
   The shared spine. Every LeanScale surface links this file first.

   Extracted from the two canonical builds:
     · The Agentic Agency pitch deck  (agenticagency.leanscale.team)
     · The 2026 Pricing page          (leanscale-pricing-2026.netlify.app)

   Load order on every surface:
     1. ls-foundations.css   ← this file (tokens, primitives, atmosphere)
     2. ls-<surface>.css     ← deck | site | dashboard | charts | print | social
     3. your-project.css     ← project-specific only. Never fork the base.
   ============================================================ */

/* ---------- Font ---------- */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

:root {

  /* ============ CORE BRAND HUES ============
     Fixed. These are the company. Do not retune. */
  --ls-black:         #000000;
  --ls-dark-gray:     #595959;
  --ls-light-gray:    #E9E9E7;
  --ls-off-white:     #FFFBFF;
  --ls-dark-purple:   #301934;  /* deep aubergine */
  --ls-near-black:      #1A0D1E;  /* deck/letterbox field — darker than aubergine, near-black */
  --ls-near-black-deep: #180A1E;  /* boot-flash guard, speaker-notes backdrop */
  --ls-strong-purple: #642585;  /* vivid brand purple */
  --ls-medium-purple: #D9AFD0;  /* dusty rose-purple */
  --ls-lime:          #E8FFCF;  /* cool mint accent */
  --ls-lime-deep:     #C7F59B;

  /* ============ MODERN SOFT TINTS ============
     Purple-tinted neutrals — warmer and airier than flat grays.
     This is what makes a LeanScale page read as ours and not
     as generic Tailwind gray. Never substitute #F8F8F8 etc. */
  --m-surface:    #FBF8FC;  /* page background — barely-there lavender white */
  --m-surface-2:  #F4EDF7;  /* raised panel / subtle fill / tinted band */
  --m-surface-3:  #EBE0F0;  /* hover / pressed fill */
  --m-card:       #FFFFFF;  /* card background */
  --m-ink:        #2A1430;  /* near-black with purple warmth — body text */
  --m-ink-soft:   #6B5670;  /* secondary text */
  --m-ink-mid:    #8A6E92;  /* tertiary body / captions */
  --m-ink-faint:  #9A8BA0;  /* labels / placeholder */

  /* Purple ramp */
  --m-purple-300: #C79BDE;
  --m-purple-400: #A861CC;
  --m-purple-500: #8E4AAF;
  --m-purple-600: #642585;  /* brand strong purple */
  --m-purple-700: #4A1A66;

  /* Soft accent washes — tinted surfaces for callouts & chips */
  --m-lavender-wash: #F3E9F8;
  --m-lime-wash:     #F2FCE6;
  --m-pink-wash:     #FBEFF6;

  /* Functional accents readable ON those washes */
  --m-lime-ink: #4A8A2E;
  --m-pink-ink: #B0568F;

  /* ============ GRADIENTS ============ */
  --m-grad-purple:    linear-gradient(135deg, #7B33A3 0%, #B057D8 100%);
  --m-grad-aubergine: linear-gradient(150deg, #301934 0%, #642585 100%);
  --m-grad-lime:      linear-gradient(135deg, #E8FFCF 0%, #D9F3FF 100%);
  --m-grad-dawn:      linear-gradient(135deg, #F3E9F8 0%, #FBEFF6 50%, #F2FCE6 100%);
  /* The signature dark field. Cover slides, dark bands, dark cards. */
  --m-grad-hero:      radial-gradient(110% 120% at 85% -10%, #47225A 0%, #2A1430 52%, #1E0D26 100%);

  /* ============ SEMANTIC ALIASES ============
     Prefer these in components so a retune propagates. */
  --bg-primary:   var(--m-surface);
  --bg-raised:    var(--m-surface-2);
  --bg-card:      var(--m-card);
  --bg-inverse:   var(--ls-dark-purple);

  --fg-primary:   var(--m-ink);
  --fg-secondary: var(--m-ink-soft);
  --fg-faint:     var(--m-ink-faint);
  --fg-on-dark:   var(--ls-off-white);
  --fg-on-dark-2: rgba(251, 248, 252, 0.62);
  --fg-on-dark-3: rgba(251, 248, 252, 0.45);

  --accent:      var(--m-purple-600);
  --accent-soft: var(--m-purple-400);

  --border-subtle:    rgba(100, 37, 133, 0.12);
  --border-strong:    rgba(100, 37, 133, 0.22);
  --border-on-dark:   rgba(251, 248, 252, 0.14);
  --border-on-dark-2: rgba(251, 248, 252, 0.28);

  /* ============ TRANSLUCENT UTILITIES ============
     One-off fades of a core hue for small UI chrome (nav dots,
     dimmed labels, panel borders) that don't fit the text-hierarchy
     or border families above. Named `<hue>-a<percent>`. */
  --fg-on-dark-a50: rgba(251, 248, 252, 0.5);
  --fg-on-dark-a86: rgba(251, 248, 252, 0.86);
  --ink-a42:        rgba(42, 20, 48, 0.42);
  --ink-a16:        rgba(42, 20, 48, 0.16);
  --ls-lime-a45:    rgba(232, 255, 207, 0.45);
  --ls-lime-a18:    rgba(232, 255, 207, 0.18);
  --ls-lime-a22:    rgba(232, 255, 207, 0.22);
  --accent-a34:     rgba(100, 37, 133, 0.34);
  --accent-a14:     rgba(100, 37, 133, 0.14);

  /* Status — on-brand, low-saturation. Never raw red/green. */
  --status-positive: #4A8A2E;
  --status-warning:  #B0568F;
  --status-critical: #8E2F4F;
  --status-info:     var(--m-purple-500);
  --status-live:     #4FBF8B;   /* the pulsing "live" dot only */

  /* ============ TYPOGRAPHY ============
     One family, everywhere. No secondary display face. */
  --font-sans:    'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', SFMono-Regular, Menlo, monospace;

  --fw-light: 300;  --fw-regular: 400;  --fw-medium: 500;
  --fw-semibold: 600;  --fw-bold: 700;  --fw-heavy: 800;

  --fs-display: 64px;
  --fs-h1: 44px;  --fs-h2: 34px;  --fs-h3: 26px;  --fs-h4: 20px;
  --fs-base: 16px;  --fs-sm: 14px;  --fs-xs: 12px;

  --lh-tight: 1.08;  --lh-snug: 1.25;  --lh-normal: 1.5;  --lh-loose: 1.65;

  --tracking-tag:    0.16em;  /* uppercase eyebrows/labels */
  --tracking-wide:   0.22em;  /* hero eyebrows */
  --tracking-tight: -0.02em;  /* h3/h4 */
  --tracking-xtight:-0.03em;  /* display/h1/h2 */

  /* ============ LAYOUT ============ */
  --space-0: 0;    --space-1: 4px;  --space-2: 8px;   --space-3: 12px;
  --space-4: 16px; --space-5: 24px; --space-6: 32px;  --space-7: 48px;
  --space-8: 64px; --space-9: 96px; --space-10: 128px;

  --maxw:      1220px;  /* marketing / microsite content width */
  --maxw-wide: 1440px;  /* dashboards */
  --maxw-prose: 720px;  /* long-form reading measure */
  --gutter:    40px;

  /* Radius — generous. The modern signature. */
  --radius-xs: 8px;   --radius-sm: 12px;  --radius-md: 16px;
  --radius-lg: 24px;  --radius-xl: 32px;  --radius-2xl: 44px;
  --radius-card: 20px;
  --radius-pill: 999px;

  /* Elevation — soft, layered, purple-tinted. Never neutral-black shadow. */
  --shadow-xs: 0 1px 2px rgba(74, 26, 102, 0.06);
  --shadow-sm: 0 2px 8px rgba(74, 26, 102, 0.08);
  --shadow-md: 0 8px 24px rgba(74, 26, 102, 0.10), 0 2px 6px rgba(74, 26, 102, 0.06);
  --shadow-lg: 0 20px 50px rgba(74, 26, 102, 0.09);
  --shadow-lift: 0 34px 72px rgba(74, 26, 102, 0.18);
  --shadow-xl: 0 32px 80px rgba(74, 26, 102, 0.18), 0 10px 24px rgba(74, 26, 102, 0.10);
  --shadow-glow: 0 0 0 4px rgba(100, 37, 133, 0.14);
  --shadow-dark: 0 24px 58px rgba(42, 20, 48, 0.34);

  /* Frosted glass — sticky navs, floating bars */
  --glass-bg:      rgba(251, 248, 252, 0.82);
  --glass-bg-dk:   rgba(48, 25, 52, 0.42);
  --glass-bg-dk-2: rgba(24, 10, 30, 0.94);  /* near-opaque — ls-near-black-deep base; e.g. speaker-notes panel */
  --glass-border:  rgba(255, 255, 255, 0.55);
  --glass-blur:   blur(16px) saturate(1.5);

  /* ============ MOTION ============
     Two curves and two durations. Everything uses these. */
  --ease:      cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-rise: cubic-bezier(0.16, 0.84, 0.28, 1);
  --dur-fast: 140ms;
  --dur:      220ms;
  --dur-slow: 520ms;
}

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

html { scroll-behavior: smooth; scroll-padding-top: 84px; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--fg-primary);
  background: var(--bg-primary);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--m-purple-700); }

h1, h2, h3, h4 {
  margin: 0;
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-xtight);
  line-height: var(--lh-tight);
}
h3, h4 { letter-spacing: var(--tracking-tight); line-height: var(--lh-snug); }

img { max-width: 100%; }

::selection { background: var(--ls-lime); color: var(--m-ink); }

/* ============================================================
   ATMOSPHERE
   The four decorative layers that make a LeanScale surface feel
   built rather than templated. Shared by decks, landings, sites.
   Use sparingly — one or two per view, never all four.
   ============================================================ */

/* 1. GRAIN — a 5% film-noise overlay. Put it on dark fields.
      Apply .ls-grain to a position:relative container. */
.ls-grain { position: relative; }
.ls-grain::after {
  content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxODAnIGhlaWdodD0nMTgwJz48ZmlsdGVyIGlkPSduJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nMC45JyBudW1PY3RhdmVzPScyJyBzdGl0Y2hUaWxlcz0nc3RpdGNoJy8+PC9maWx0ZXI+PHJlY3Qgd2lkdGg9JzEwMCUnIGhlaWdodD0nMTAwJScgZmlsdGVyPSd1cmwoI24pJy8+PC9zdmc+");
  background-size: 180px 180px; opacity: 0.05; mix-blend-mode: overlay;
}

/* 2. AURA — big blurred color blobs that drift. Depth on dark fields.
      Always position them with inline left/top/width/height + background. */
.ls-aura {
  position: absolute; border-radius: 50%; filter: blur(78px);
  pointer-events: none; opacity: 0.5;
}
@keyframes lsAuraA { 0%,100% { transform: translate(0,0) scale(1); }    50% { transform: translate(60px,42px) scale(1.15); } }
@keyframes lsAuraB { 0%,100% { transform: translate(0,0) scale(1.1); }  50% { transform: translate(-52px,-30px) scale(0.94); } }
.ls-aura-a { animation: lsAuraA 17s ease-in-out infinite; }
.ls-aura-b { animation: lsAuraB 21s ease-in-out infinite; }

/* 3. ORBIT — slow concentric rings. One per view, max. */
@keyframes lsSpin { to { transform: rotate(360deg); } }
.ls-orbit { position: absolute; pointer-events: none; animation: lsSpin 140s linear infinite; }

/* 4. DOTGRID — a faded dot texture for light bands. */
.ls-dotgrid { position: relative; }
.ls-dotgrid::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(100,37,133,0.055) 1px, transparent 1.4px);
  background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(130% 100% at 50% -12%, #000 0%, transparent 64%);
          mask-image: radial-gradient(130% 100% at 50% -12%, #000 0%, transparent 64%);
}

/* ============================================================
   PRIMITIVES
   ============================================================ */

/* ---------- Type primitives ---------- */
.m-display {
  font-family: var(--font-display); font-size: var(--fs-display);
  font-weight: var(--fw-bold); line-height: var(--lh-tight);
  letter-spacing: var(--tracking-xtight);
}
.m-grad-text {
  background: var(--m-grad-purple);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* EYEBROW — the uppercase kicker above a headline. */
.ls-eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 11px; font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: var(--accent);
}
.ls-eyebrow-dark { color: var(--ls-lime); }

/* PILL — an eyebrow with a border. Dark fields. */
.ls-pill {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 10.5px; font-weight: var(--fw-bold);
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ls-lime); border: 1px solid rgba(232,255,207,0.32);
  border-radius: var(--radius-pill); padding: 8px 16px;
  background: rgba(232,255,207,0.07);
}

/* MARK — the lime highlight-underline behind a hero word.
   ONE per headline. The single most recognizable LeanScale device.

   Same class, two behaviors, because the device is different on
   each field:
     LIGHT → a solid lime bar behind dark text (a highlighter).
     DARK  → the word itself goes lime with a soft glow. A bar on a
             dark field either hides the letters or reads gray, and
             dark text on a dark slide loses its ascenders. */
.ls-mark { position: relative; white-space: nowrap; }
.ls-mark::after {
  content: ""; position: absolute; left: -2px; right: -2px; bottom: 0.06em;
  height: 0.38em; background: var(--ls-lime); z-index: -1; border-radius: 2px;
}
[data-theme="dark"] .ls-mark,
.band-dark .ls-mark,
.ls-hero-dark .ls-mark,
.cv-dark .ls-mark,
.ls-page-cover .ls-mark,
.ls-on-dark .ls-mark {
  color: var(--ls-lime); -webkit-text-fill-color: var(--ls-lime);
  text-shadow: 0 0 26px rgba(200, 232, 158, 0.7);
}
[data-theme="dark"] .ls-mark::after,
.band-dark .ls-mark::after,
.ls-hero-dark .ls-mark::after,
.cv-dark .ls-mark::after,
.ls-page-cover .ls-mark::after,
.ls-on-dark .ls-mark::after { content: none; }

/* LOGO — one asset, two treatments.
   The wordmark ships white. On a light field, invert it with a
   filter rather than shipping a second file that can drift. */
.ls-logo-mark { height: 28px; width: auto; object-fit: contain; display: block; }
.ls-logo-ink  { filter: brightness(0); opacity: 0.85; }

.ls-lead      { font-size: 17px; line-height: var(--lh-loose); color: var(--fg-secondary); }
.ls-lead-dark { color: var(--fg-on-dark-2); }
.ls-kicker    { font-size: 12.5px; line-height: 1.55; color: var(--m-ink-mid); }
.ls-label {
  font-size: 10px; font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tag); text-transform: uppercase;
  color: var(--fg-faint);
}

/* ---------- Buttons ---------- */
.m-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--font-sans); font-size: 13.5px; font-weight: var(--fw-bold);
  letter-spacing: -0.01em; padding: 11px 20px;
  border: 1px solid transparent; border-radius: var(--radius-pill);
  cursor: pointer; transition: transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
}
.m-btn:active { transform: translateY(1px); }
.m-btn-primary { background: var(--m-ink); color: var(--fg-on-dark) !important; }
.m-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 12px 28px rgba(42,20,48,0.28); color: var(--fg-on-dark); }
.m-btn-soft { background: var(--m-lavender-wash); color: var(--m-purple-700); border-color: var(--border-subtle); }
.m-btn-soft:hover { background: var(--m-surface-3); }
.m-btn-ghost { background: transparent; color: var(--accent); border-color: var(--border-strong); }
.m-btn-ghost:hover { background: var(--m-lavender-wash); }
.m-btn-lime { background: var(--ls-lime); color: var(--m-ink) !important; }
.m-btn-lime:hover { transform: translateY(-1px); box-shadow: 0 12px 28px rgba(232,255,207,0.30); color: var(--m-ink); }

/* ---------- Cards ---------- */
.m-card {
  background: var(--bg-card); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card); box-shadow: var(--shadow-lg);
  transition: transform var(--dur-slow) var(--ease),
              box-shadow var(--dur-slow) var(--ease), border-color 400ms ease;
}
/* Hover-lift is the house interaction. Same on every card, everywhere. */
.m-card-hover:hover {
  transform: translateY(-6px); box-shadow: var(--shadow-lift);
  border-color: var(--m-purple-300);
}
.m-card-dark {
  background: radial-gradient(120% 130% at 80% -10%, #47225A 0%, #2A1430 60%);
  border: 1px solid var(--border-on-dark); color: var(--fg-on-dark);
  box-shadow: var(--shadow-dark);
}
.m-card-dark.m-card-hover:hover {
  border-color: rgba(232,255,207,0.5); box-shadow: 0 34px 74px rgba(10,3,14,0.5);
}
.m-glass {
  background: var(--glass-bg); backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border); border-radius: var(--radius-lg);
}

/* ---------- Chips & badges ---------- */
.m-chip {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: var(--fw-semibold); letter-spacing: -0.01em;
  color: var(--m-purple-700); background: var(--m-lavender-wash);
  border: 1px solid rgba(100,37,133,0.10); border-radius: var(--radius-pill);
  padding: 6px 12px;
}
.m-chip-lime { background: var(--m-lime-wash); color: #3F6B24; border-color: rgba(63,107,36,0.14); }
.m-chip-dark { background: rgba(232,255,207,0.14); border-color: rgba(232,255,207,0.34); color: var(--ls-lime); }

/* BADGE — the floating "most popular" tab that overhangs a card's top edge. */
.ls-badge {
  position: absolute; top: -11px; right: 22px;
  font-size: 10px; font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tag); text-transform: uppercase;
  background: var(--ls-lime); color: var(--m-ink);
  border-radius: var(--radius-pill); padding: 6px 13px;
  box-shadow: 0 8px 20px rgba(42,20,48,0.22);
}

/* LIVE DOT — only for genuinely live/streaming data. */
@keyframes lsPulse {
  0%,100% { opacity: 1; box-shadow: 0 0 0 0 rgba(79,191,139,0.45); }
  50%     { opacity: 0.6; box-shadow: 0 0 0 5px rgba(79,191,139,0); }
}
.ls-dot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
  background: var(--status-live); animation: lsPulse 1.8s infinite;
}

/* ---------- Inputs ---------- */
.m-input {
  font-family: var(--font-sans); font-size: var(--fs-sm);
  color: var(--fg-primary); background: var(--bg-card);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-sm);
  padding: 10px 14px; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.m-input::placeholder { color: var(--fg-faint); }
.m-input:focus { outline: none; border-color: var(--accent); box-shadow: var(--shadow-glow); }

/* ---------- Rules & layout helpers ---------- */
.ls-rule { border: 0; border-top: 1px solid var(--border-subtle); margin: 0; }
.m-card-dark .ls-rule, .ls-rule-dark { border-top-color: rgba(251,248,252,0.16); }
.ls-wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.ls-stack { display: flex; flex-direction: column; }

/* ---------- Accessibility ---------- */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.ls-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

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