/* ============================================================================
   LouieAuto Design System — component layer (louie-ds.css)
   Token-driven components built on /css/design-tokens.css. All classes are
   namespaced `lds-` so this file is ADDITIVE and never collides with the
   bespoke styles already on existing pages. Adopt incrementally.
   Pair with: <link rel="stylesheet" href="/css/design-tokens.css">
              <link rel="stylesheet" href="/css/louie-ds.css">
   ========================================================================== */

/* ---- App surface (opt-in base; apply to a wrapper, not global, to stay safe) ---- */
.lds-app, .lds-app-dark {
  font-family: var(--font-sans);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.lds-app      { background: var(--surface); color: var(--ink); }
.lds-app-dark { background: linear-gradient(180deg, var(--navy), var(--navy-2)); color: var(--text-primary); }

/* ---- Typography ---- */
.lds-display { font-family: var(--font-serif); font-size: var(--text-5xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); font-weight: 900; }
.lds-h1 { font-size: var(--text-4xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); font-weight: 900; }
.lds-h2 { font-size: var(--text-2xl); line-height: var(--leading-snug); letter-spacing: var(--tracking-snug); font-weight: 800; }
.lds-h3 { font-size: var(--text-xl); line-height: var(--leading-snug); font-weight: 700; }
.lds-h4 { font-size: var(--text-md); line-height: var(--leading-snug); font-weight: 700; }
.lds-body { font-size: var(--text-base); line-height: var(--leading-normal); }
.lds-lead { font-size: var(--text-lg); line-height: var(--leading-loose); color: var(--muted); }
.lds-small { font-size: var(--text-sm); }
.lds-eyebrow { font-size: var(--text-xs); font-weight: 800; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--gold-dark); }
.lds-app-dark .lds-eyebrow { color: var(--gold); }
.lds-mono { font-family: var(--font-mono); font-size: var(--text-sm); }
.lds-muted { color: var(--muted); }
.lds-em { font-family: var(--font-serif); font-style: italic; color: var(--gold-dark); }
.lds-app-dark .lds-em { color: var(--gold); }

/* ---- Buttons ---- */
.lds-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  font-family: var(--font-sans); font-size: var(--text-base); font-weight: 700; line-height: 1;
  padding: var(--space-3) var(--space-5); border-radius: var(--radius-md);
  border: 1px solid transparent; cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background var(--motion-fast), color var(--motion-fast), border-color var(--motion-fast), transform var(--motion-fast), box-shadow var(--motion-fast);
}
.lds-btn:active { transform: translateY(1px); }
.lds-btn-primary { background: var(--gold-dark); color: #fff; box-shadow: var(--shadow-gold); }
.lds-btn-primary:hover { background: #6b4f1f; transform: translateY(-2px); box-shadow: 0 10px 30px rgba(201,168,76,0.34); }
.lds-app-dark .lds-btn-primary { background: var(--gold); color: var(--navy); }
.lds-app-dark .lds-btn-primary:hover { background: var(--gold-bright); }
.lds-btn-outline { background: transparent; color: var(--ink); border-color: var(--border-3, #d8cba8); }
.lds-btn-outline:hover { border-color: var(--gold-dark); color: #fff; background: var(--gold-dark); }
.lds-app-dark .lds-btn-outline { color: var(--text-primary); border-color: var(--gold-25); }
.lds-app-dark .lds-btn-outline:hover { background: var(--gold); color: var(--navy); border-color: var(--gold); }
.lds-btn-ghost { background: transparent; color: var(--gold-dark); border-color: transparent; }
.lds-btn-ghost:hover { background: var(--gold-6, rgba(201,168,76,.08)); }
.lds-app-dark .lds-btn-ghost { color: var(--gold); }
.lds-btn-sm { font-size: var(--text-sm); padding: var(--space-2) var(--space-3); }
.lds-btn-lg { font-size: var(--text-lg); padding: var(--space-4) var(--space-7); }
.lds-btn[disabled], .lds-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }

/* ---- Cards ---- */
.lds-card {
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6); box-shadow: var(--shadow-sm);
}
.lds-card-dark {
  background: linear-gradient(135deg, #11213a, var(--navy-2)); color: var(--text-primary);
  border: 1px solid var(--gold-12, rgba(201,168,76,.18)); border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6);
}
.lds-card-hover { transition: transform var(--motion-base), box-shadow var(--motion-base); }
.lds-card-hover:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

/* ---- KPI tiles ---- */
.lds-kpi { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-4) var(--space-5);
  background: linear-gradient(135deg, #11213a, var(--navy-2)); border: 1px solid var(--gold-12, rgba(201,168,76,.18)); border-radius: var(--radius-lg); }
.lds-kpi-value { font-size: var(--text-3xl); font-weight: 900; line-height: 1; color: #fff; letter-spacing: var(--tracking-snug); }
.lds-kpi-label { font-size: var(--text-xs); font-weight: 700; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--muted-2); }
.lds-kpi-trend { font-size: var(--text-sm); color: var(--gold); margin-top: var(--space-1); }
.lds-kpi-trend.up { color: var(--success-bright); }
.lds-kpi-trend.down { color: var(--danger, #dc2626); }
.lds-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-4); }

/* ---- Badges / pills ---- */
.lds-badge { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-xs); font-weight: 700;
  letter-spacing: var(--tracking-wide); padding: 3px 10px; border-radius: var(--radius-pill); border: 1px solid transparent; }
.lds-badge-gold    { background: var(--gold-12, rgba(201,168,76,.14)); color: var(--gold-dark); border-color: var(--gold-25, rgba(201,168,76,.4)); }
.lds-badge-success { background: rgba(34,197,94,.14); color: #15803d; border-color: rgba(34,197,94,.4); }
.lds-badge-warning { background: rgba(245,158,11,.14); color: #b45309; border-color: rgba(245,158,11,.4); }
.lds-badge-danger  { background: rgba(220,38,38,.12); color: #b91c1c; border-color: rgba(220,38,38,.4); }
.lds-badge-neutral { background: rgba(100,116,139,.12); color: var(--muted); border-color: rgba(100,116,139,.3); }
.lds-app-dark .lds-badge-success { color: #34d399; } .lds-app-dark .lds-badge-warning { color: #fbbf24; }
.lds-app-dark .lds-badge-danger { color: #f87171; } .lds-app-dark .lds-badge-neutral { color: var(--muted-2); }
.lds-badge-live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px rgba(34,197,94,.2); }

/* ---- Forms ---- */
.lds-field { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-4); }
.lds-label { font-size: var(--text-xs); font-weight: 700; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--muted); }
.lds-input, .lds-select, .lds-textarea {
  font-family: var(--font-sans); font-size: var(--text-base); color: var(--ink);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4); transition: border-color var(--motion-fast), box-shadow var(--motion-fast); width: 100%;
}
.lds-input:focus, .lds-select:focus, .lds-textarea:focus { outline: none; border-color: var(--gold-dark); box-shadow: 0 0 0 3px var(--gold-12, rgba(201,168,76,.18)); }
.lds-app-dark .lds-input, .lds-app-dark .lds-select, .lds-app-dark .lds-textarea { background: rgba(255,255,255,.04); color: var(--text-primary); border-color: var(--gold-12, rgba(201,168,76,.18)); }

/* ---- Tables ---- */
.lds-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.lds-table th { text-align: left; font-size: var(--text-xs); font-weight: 800; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--muted); padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border); }
.lds-table td { padding: var(--space-3); border-bottom: 1px solid var(--border); }
.lds-table tbody tr:hover { background: rgba(0,0,0,.02); }
.lds-app-dark .lds-table th { color: var(--muted-2); border-bottom-color: var(--gold-12, rgba(201,168,76,.18)); }
.lds-app-dark .lds-table td { border-bottom-color: rgba(255,255,255,.06); }
.lds-app-dark .lds-table tbody tr:hover { background: rgba(255,255,255,.03); }

/* ---- Alerts ---- */
.lds-alert { display: flex; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-md); border-left: 3px solid; font-size: var(--text-sm); }
.lds-alert-info    { background: rgba(59,130,246,.08);  border-color: #3b82f6; color: #1e40af; }
.lds-alert-success { background: rgba(34,197,94,.08);   border-color: #22c55e; color: #15803d; }
.lds-alert-warning { background: rgba(245,158,11,.08);  border-color: #f59e0b; color: #b45309; }
.lds-alert-danger  { background: rgba(220,38,38,.08);   border-color: #dc2626; color: #b91c1c; }

/* ---- Empty state ---- */
.lds-empty { text-align: center; padding: var(--space-8) var(--space-5); color: var(--muted); }
.lds-empty-icon { font-size: var(--text-3xl); opacity: .5; margin-bottom: var(--space-3); }
.lds-empty-title { font-size: var(--text-md); font-weight: 700; color: var(--ink); margin-bottom: var(--space-2); }
.lds-app-dark .lds-empty-title { color: var(--text-primary); }

/* ---- Modal ---- */
.lds-modal-overlay { position: fixed; inset: 0; background: rgba(10,15,30,.6); display: flex; align-items: center; justify-content: center; padding: var(--space-5); z-index: 1000; }
.lds-modal { background: var(--surface); color: var(--ink); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); max-width: 560px; width: 100%; max-height: 90vh; overflow: auto; }
.lds-modal-head { display: flex; align-items: center; justify-content: space-between; padding: var(--space-5) var(--space-6); border-bottom: 1px solid var(--border); }
.lds-modal-body { padding: var(--space-6); }
.lds-modal-close { background: none; border: 0; cursor: pointer; color: var(--muted); width: 40px; height: 40px; border-radius: var(--radius-md); font-size: var(--text-xl); line-height: 1; }
.lds-modal-close:hover { background: rgba(0,0,0,.05); color: var(--ink); }

/* ---- Layout ---- */
.lds-section { padding: var(--space-9) var(--space-7); }
.lds-wrap { max-width: 1080px; margin: 0 auto; }
.lds-wrap-wide { max-width: 1280px; margin: 0 auto; }
.lds-grid { display: grid; gap: var(--space-5); }
.lds-grid-2 { grid-template-columns: repeat(2, 1fr); }
.lds-grid-3 { grid-template-columns: repeat(3, 1fr); }
.lds-grid-4 { grid-template-columns: repeat(4, 1fr); }
.lds-stack > * + * { margin-top: var(--space-4); }
.lds-row { display: flex; align-items: center; gap: var(--space-3); }

/* ---- Accessibility: visible focus ring on all interactive elements (WCAG 2.2) ---- */
.lds-btn:focus-visible, .lds-input:focus-visible, .lds-select:focus-visible, .lds-textarea:focus-visible,
.lds-modal-close:focus-visible, a.lds-link:focus-visible {
  outline: 2px solid var(--gold-dark); outline-offset: 2px; border-radius: var(--radius-sm);
}

/* ---- Responsive + reduced motion ---- */
@media (max-width: 768px) {
  .lds-grid-2, .lds-grid-3, .lds-grid-4 { grid-template-columns: 1fr; }
  .lds-section { padding: var(--space-7) var(--space-5); }
}
@media (prefers-reduced-motion: reduce) {
  .lds-btn, .lds-card-hover, .lds-input { transition: none; }
  .lds-btn-primary:hover, .lds-card-hover:hover { transform: none; }
}