/**
 * Kodeleads on Web Awesome — theme + app-level tweaks.
 *
 * The palette, type and radii below mirror kodeleads.com so the app and the
 * marketing site read as one product. Web Awesome ships its tokens inside
 * cascade layers (@layer wa-theme / wa-color-palette); this file is unlayered,
 * so these values win without needing !important or per-component overrides.
 *
 * Semantic WA tokens resolve through the numeric ramps, e.g.
 *   --wa-color-brand-fill-loud  → --wa-color-brand-50
 *   --wa-color-surface-border   → --wa-color-neutral-90
 * so redefining the ramps rethemes every component at once.
 */

:root {
  /* ── Brand ramp: anchored on the site's #5f57ff at step 50 ─────────────── */
  --wa-color-brand-95: oklch(96.5% 0.022 278);
  --wa-color-brand-90: oklch(92.5% 0.048 278);
  --wa-color-brand-80: oklch(84.8% 0.100 278);
  --wa-color-brand-70: oklch(76.7% 0.155 278);
  --wa-color-brand-60: oklch(68.9% 0.200 278);
  --wa-color-brand-50: #5f57ff;
  --wa-color-brand-40: oklch(48.6% 0.210 278);
  --wa-color-brand-30: oklch(41.2% 0.178 278);
  --wa-color-brand-20: oklch(33.7% 0.148 278);
  --wa-color-brand-10: oklch(24.6% 0.110 278);
  --wa-color-brand-05: oklch(19.4% 0.088 278);

  /* ── Neutral ramp: the site's greys (#0d0d12 → #f8f9fb) ────────────────── */
  --wa-color-neutral-95: #f8f9fb;  /* lowered surfaces  */
  --wa-color-neutral-90: #eeeff2;  /* borders           */
  --wa-color-neutral-80: #dfe1e6;
  --wa-color-neutral-70: #c9cdd6;
  --wa-color-neutral-60: #a4abb8;
  --wa-color-neutral-50: #858d9d;
  --wa-color-neutral-40: #666d80;  /* quiet text        */
  --wa-color-neutral-30: #4a5061;
  --wa-color-neutral-20: #2e323d;
  --wa-color-neutral-10: #0d0d12;  /* normal text       */
  --wa-color-neutral-05: #08080c;

  /* Accents from the same kit (success/danger keep WA's semantics) */
  --wa-color-green-50: #40c4aa;
  --wa-color-cyan-50:  #33cfff;
  --wa-color-red-50:   #df1c41;

  /* ── Type ──────────────────────────────────────────────────────────────── */
  --wa-font-family-body: 'Inter Tight', Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --wa-font-family-heading: 'Inter Tight', Inter, -apple-system, sans-serif;
  --wa-font-weight-heading: 500;

  /* ── Shape: the site's softer corners ──────────────────────────────────── */
  --wa-border-radius-s: 8px;
  --wa-border-radius-m: 10px;
  --wa-border-radius-l: 14px;
  --wa-border-radius-xl: 20px;
}

/* Headings inherit the site's tighter tracking */
h1, h2, h3, h4 { letter-spacing: -0.03em; }

/* wa-page prerequisite */
html, body { min-height: 100%; padding: 0; margin: 0; }

/* Hide custom elements until they're registered (no FOUC) */
:not(:defined) { visibility: hidden; }

/* ── App navigation (inside wa-page's navigation slot) ────────────────────── */
.kl-nav { display: flex; flex-direction: column; gap: var(--wa-space-3xs); padding: var(--wa-space-s); }
.kl-nav a, .kl-nav button {
  display: flex; align-items: center; gap: var(--wa-space-s);
  padding: var(--wa-space-xs) var(--wa-space-s);
  border-radius: var(--wa-border-radius-m);
  font-size: var(--wa-font-size-s); font-weight: var(--wa-font-weight-semibold);
  color: var(--wa-color-text-quiet); text-decoration: none;
  border: none; background: none; cursor: pointer; font-family: inherit; width: 100%; text-align: left;
}
.kl-nav a:hover, .kl-nav button:hover { background: var(--wa-color-surface-lowered); color: var(--wa-color-text-normal); }
.kl-nav a.active { background: var(--wa-color-brand-fill-quiet); color: var(--wa-color-brand-on-quiet); }
.kl-nav i { width: 16px; text-align: center; }

.kl-logo { display: flex; align-items: center; padding: var(--wa-space-m) var(--wa-space-l); }

/* ── Page header inside main ──────────────────────────────────────────────── */
.kl-page-header { display: flex; align-items: center; gap: var(--wa-space-m); flex-wrap: wrap; margin-bottom: var(--wa-space-l); }
.kl-page-header h1 { font-size: var(--wa-font-size-xl); margin: 0; }
.kl-page-header .sub { color: var(--wa-color-text-quiet); font-size: var(--wa-font-size-s); margin-top: 2px; }
.kl-spacer { flex: 1; }

/* ── Data tables (WA native styles + app polish) ──────────────────────────── */
.kl-table-wrap { overflow-x: auto; border: 1px solid var(--wa-color-surface-border); border-radius: var(--wa-border-radius-l); background: var(--wa-color-surface-default); }
.kl-table-wrap table { width: 100%; border-collapse: collapse; margin: 0; }
.kl-table-wrap th {
  text-align: left; padding: var(--wa-space-s) var(--wa-space-m);
  font-size: var(--wa-font-size-2xs); text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--wa-color-text-quiet); background: var(--wa-color-surface-lowered);
  border-bottom: 1px solid var(--wa-color-surface-border); white-space: nowrap;
}
.kl-table-wrap td { padding: var(--wa-space-s) var(--wa-space-m); font-size: var(--wa-font-size-s); border-bottom: 1px solid var(--wa-color-surface-border); }
.kl-table-wrap tr:last-child td { border-bottom: none; }
.kl-table-wrap tbody tr:hover { background: var(--wa-color-surface-lowered); }
.kl-table-wrap tbody tr[onclick] { cursor: pointer; }

/* ── Small helpers ────────────────────────────────────────────────────────── */
.kl-row { display: flex; gap: var(--wa-space-s); align-items: center; flex-wrap: wrap; }
.kl-muted { color: var(--wa-color-text-quiet); }