/* ============================================================================
   LocalPilot Design System 2.0 — shared token + base-component layer
   Spec: docs/LOCALPILOT-DESIGN-SYSTEM-2.md
   Identity (per §5/§6/§8): operational, grounded, business-centric,
   utilitarian-premium — DISTINCT from Sukulu (navy + violet/coral, editorial).
   Blue + green, Inter-led, LESS rounded, gradients rare, no AI-demo styling.

   USAGE: <link rel="stylesheet" href="/localpilot-design.css">
          + fonts: <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Manrope:wght@600;700;800&display=swap">
   All classes/tokens are prefixed `lp-` so this layer is ADDITIVE — it never
   overrides a page's existing styles until that page opts in. It can coexist
   with Sukulu's sk- layer in the same shared file (dashboard.html etc.), each
   used in its own product's context (mode=studio = Sukulu, business = LocalPilot).
   Breakpoints: 360 / 390 / 768 / 1024 / 1280 / 1440. Icons: /ui-icons.svg (Lucide).
   ============================================================================ */

:root {
  /* ---- Brand (restrained, business) ---- */
  --lp-blue: #155EEF;
  --lp-blue-dark: #004EEB;
  --lp-blue-soft: #EFF4FF;
  --lp-green: #12B76A;
  --lp-green-soft: #ECFDF3;

  /* ---- Ink & neutrals ---- */
  --lp-ink: #101828;
  --lp-ink-soft: #344054;
  --lp-muted: #667085;
  --lp-white: #FFFFFF;
  --lp-surface: #F8FAFC;
  --lp-surface-2: #F2F4F7;
  --lp-border: #E4E7EC;

  /* ---- Semantic (don't reuse brand blue for every state) ---- */
  --lp-success: #12B76A; --lp-success-soft: #ECFDF3;
  --lp-warning: #F79009; --lp-warning-soft: #FFFAEB;
  --lp-danger:  #D92D20; --lp-danger-soft:  #FEF3F2;
  --lp-info:    #155EEF; --lp-info-soft:    #EFF4FF;

  /* ---- Typography (Inter-led; Manrope for marketing display only) ---- */
  --lp-font-display: "Manrope", "Inter", system-ui, -apple-system, sans-serif;
  --lp-font-ui: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --lp-text-xs: 0.75rem;  --lp-text-sm: 0.875rem; --lp-text-base: 1rem;
  --lp-text-lg: 1.125rem; --lp-text-xl: 1.25rem;  --lp-text-2xl: 1.5rem;
  --lp-text-3xl: 1.875rem;--lp-text-4xl: 2.25rem; --lp-text-5xl: 3rem;
  --lp-text-6xl: 3.75rem;

  /* ---- Spacing (8px) ---- */
  --lp-space-1: 4px;  --lp-space-2: 8px;  --lp-space-3: 12px; --lp-space-4: 16px;
  --lp-space-5: 24px; --lp-space-6: 32px; --lp-space-7: 40px; --lp-space-8: 48px;
  --lp-space-9: 64px; --lp-space-10: 80px;--lp-space-11: 96px;--lp-space-12: 120px;

  /* ---- Radius (less rounded than Sukulu) ---- */
  --lp-radius-sm: 6px; --lp-radius-md: 10px; --lp-radius-lg: 14px; --lp-radius-xl: 20px; --lp-radius-pill: 999px;

  /* ---- Shadow (3 levels; borders preferred) ---- */
  --lp-shadow-1: 0 1px 2px rgba(16,24,40,.06), 0 1px 1px rgba(16,24,40,.04);
  --lp-shadow-2: 0 8px 20px -6px rgba(16,24,40,.14);
  --lp-shadow-3: 0 24px 56px -24px rgba(16,24,40,.30);

  /* ---- Motion / z / container ---- */
  --lp-dur-micro: 130ms; --lp-dur: 200ms; --lp-dur-lg: 300ms; --lp-ease: cubic-bezier(.4,0,.2,1);
  --lp-z-dropdown: 1000; --lp-z-sticky: 1020; --lp-z-overlay: 1040; --lp-z-modal: 1050; --lp-z-toast: 1060;
  --lp-container: 1280px; --lp-container-narrow: 760px; --lp-measure: 66ch;
  --lp-focus-ring: 0 0 0 3px rgba(21,94,239,.30);
}

/* ---- Container ---- */
.lp-wrap { width: 100%; max-width: var(--lp-container); margin-inline: auto; padding-inline: clamp(16px, 4vw, 40px); }
.lp-wrap--narrow { max-width: var(--lp-container-narrow); }

/* ---- Typography helpers ---- */
.lp-h1 { font-family: var(--lp-font-display); font-weight: 800; font-size: clamp(2.75rem, 5.5vw, 4.75rem); line-height: 1.0; letter-spacing: -0.04em; text-wrap: balance; color: var(--lp-ink); }
.lp-h2 { font-family: var(--lp-font-display); font-weight: 700; font-size: clamp(2rem, 3.8vw, 3.25rem); line-height: 1.08; letter-spacing: -0.03em; text-wrap: balance; color: var(--lp-ink); }
.lp-lead { font-family: var(--lp-font-ui); font-size: clamp(1.0625rem, 1.3vw, 1.125rem); line-height: 1.6; color: var(--lp-ink-soft); max-width: var(--lp-measure); }
.lp-eyebrow { font-family: var(--lp-font-ui); font-size: var(--lp-text-sm); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--lp-blue); }
.lp-page-title { font-family: var(--lp-font-ui); font-weight: 700; font-size: clamp(1.5rem, 2.4vw, 2rem); letter-spacing: -0.02em; color: var(--lp-ink); }

/* ---- Buttons: 4 variants × 3 sizes (solid, not gradient) ---- */
.lp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--lp-font-ui); font-weight: 600; font-size: 15px; line-height: 1;
  height: 42px; padding: 0 18px; border-radius: var(--lp-radius-md);
  border: 1px solid transparent; cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: background var(--lp-dur-micro) var(--lp-ease), border-color var(--lp-dur-micro) var(--lp-ease), color var(--lp-dur-micro) var(--lp-ease), opacity var(--lp-dur-micro) var(--lp-ease);
}
.lp-btn--sm { height: 36px; padding: 0 14px; font-size: var(--lp-text-sm); }
.lp-btn--lg { height: 48px; padding: 0 24px; font-size: var(--lp-text-lg); }
.lp-btn--primary { background: var(--lp-blue); color: #fff; }
.lp-btn--primary:hover { background: var(--lp-blue-dark); }
.lp-btn--secondary { background: var(--lp-white); color: var(--lp-ink); border-color: var(--lp-border); }
.lp-btn--secondary:hover { border-color: var(--lp-ink-soft); background: var(--lp-surface); }
.lp-btn--ghost { background: transparent; color: var(--lp-ink); }
.lp-btn--ghost:hover { background: var(--lp-surface-2); }
.lp-btn--destructive { background: var(--lp-danger); color: #fff; }
.lp-btn--destructive:hover { background: #B42318; }
.lp-btn:disabled, .lp-btn[aria-disabled="true"] { opacity: .5; cursor: default; pointer-events: none; }
.lp-btn:focus-visible { outline: none; box-shadow: var(--lp-focus-ring); }
.lp-btn--loading { position: relative; color: transparent !important; pointer-events: none; }
.lp-btn--loading::after { content: ""; position: absolute; width: 16px; height: 16px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; color: #fff; animation: lp-spin .7s linear infinite; }
@keyframes lp-spin { to { transform: rotate(360deg); } }

/* ---- Card: earns its place (§44); border over shadow (§10) ---- */
.lp-card { background: var(--lp-white); border: 1px solid var(--lp-border); border-radius: var(--lp-radius-lg); padding: var(--lp-space-5); }
.lp-card--float { box-shadow: var(--lp-shadow-2); border-color: transparent; }

/* ---- Form controls (critical for LocalPilot §45) ---- */
.lp-field { font-family: var(--lp-font-ui); font-size: var(--lp-text-base); color: var(--lp-ink); background: var(--lp-white); border: 1px solid var(--lp-border); border-radius: var(--lp-radius-md); height: 44px; padding: 0 13px; width: 100%; transition: border-color var(--lp-dur-micro) var(--lp-ease), box-shadow var(--lp-dur-micro) var(--lp-ease); }
textarea.lp-field { height: auto; padding: 11px 13px; min-height: 92px; resize: vertical; }
.lp-field::placeholder { color: var(--lp-muted); }
.lp-field:focus-visible, .lp-field:focus { outline: none; border-color: var(--lp-blue); box-shadow: var(--lp-focus-ring); }
.lp-label { display: inline-block; font-family: var(--lp-font-ui); font-size: var(--lp-text-sm); font-weight: 600; color: var(--lp-ink-soft); margin-bottom: 6px; }

/* ---- Pills / badges (pills only for filters/tags/status, §10) ---- */
.lp-pill { display: inline-flex; align-items: center; gap: 6px; font-family: var(--lp-font-ui); font-size: var(--lp-text-sm); font-weight: 600; padding: 6px 13px; border-radius: var(--lp-radius-pill); border: 1px solid var(--lp-border); background: var(--lp-white); color: var(--lp-ink-soft); cursor: pointer; }
.lp-pill[aria-pressed="true"], .lp-pill.is-on { background: var(--lp-blue); border-color: transparent; color: #fff; }
.lp-badge { display: inline-flex; align-items: center; gap: 5px; font-family: var(--lp-font-ui); font-size: var(--lp-text-xs); font-weight: 600; padding: 3px 9px; border-radius: var(--lp-radius-pill); letter-spacing: .01em; }
.lp-badge--success { background: var(--lp-success-soft); color: #027A48; }
.lp-badge--warning { background: var(--lp-warning-soft); color: #B54708; }
.lp-badge--danger  { background: var(--lp-danger-soft);  color: #B42318; }
.lp-badge--info    { background: var(--lp-info-soft);    color: var(--lp-blue-dark); }

/* ---- Icons: one Lucide family (/ui-icons.svg), replace emoji in operational UI (§11) ---- */
.lp-icon { width: 20px; height: 20px; stroke: currentColor; stroke-width: 1.9; fill: none; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.lp-icon--sm { width: 16px; height: 16px; }
.lp-icon--lg { width: 24px; height: 24px; }

/* ---- Accessibility: visible focus; reduced motion (§48) ---- */
:where(a, button, [role="button"], input, select, textarea, [tabindex]).lp-focusable:focus-visible { outline: none; box-shadow: var(--lp-focus-ring); border-radius: var(--lp-radius-sm); }
@media (prefers-reduced-motion: reduce) {
  .lp-reduce-motion *, .lp-reduce-motion *::before, .lp-reduce-motion *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}