/* ============================================================================
   Lexaily storefront — design tokens (FRONTEND-REBUILD-PLAN §4.1)
   ----------------------------------------------------------------------------
   The single source of truth for color / space / type / radius / shadow / z.
   ONE edit re-themes the whole storefront; per-client white-labeling becomes a
   variable change.

   Naming is deliberately `--lx-color-*`, `--lx-space-*`, … (NOT the older
   `--lx-brand` / `--lx-ink` names already defined inside the legacy css.css)
   so this file is collision-free and can load alongside css.css during the
   strangler migration. The new component stylesheet (storefront.css) consumes
   ONLY these tokens.
   ========================================================================== */

:root {
  /* ── Brand / accent ──────────────────────────────────────────────────── */
  --lx-color-brand:        #418899;   /* teal — primary */
  --lx-color-brand-ink:    #2e6273;   /* hover / active */
  --lx-color-brand-tint:   #eaf2f4;   /* subtle teal wash */
  --lx-color-accent:       #3f78e0;   /* links / secondary CTA */
  --lx-color-accent-ink:   #2b5cb8;

  /* ── Ink / text ──────────────────────────────────────────────────────── */
  --lx-color-ink:          #161513;   /* primary text — warm near-black (editorial) */
  --lx-color-ink-2:        #4d4a45;   /* secondary text */
  --lx-color-ink-3:        #766f68;   /* muted / captions — 4.98:1 on #fff (WCAG AA) */
  --lx-color-on-brand:     #ffffff;

  /* ── Surfaces / lines ────────────────────────────────────────────────── */
  --lx-color-bg:           #ffffff;
  --lx-color-bg-2:         #f7f7f5;   /* warm page / subtle panels (editorial) */
  --lx-color-bg-3:         #efefea;   /* warm skeleton base */
  --lx-color-line:         #e7e4de;   /* warm hairline */
  --lx-color-line-2:       #948e84;   /* control boundary — 3.25:1 on #fff (WCAG 1.4.11) */

  /* ── Semantic ────────────────────────────────────────────────────────── */
  --lx-color-price:        #0a7d32;   /* all-in total / "save vs OTA" */
  --lx-color-urgent:       #d23f3f;   /* HOT / urgency badge */
  --lx-color-urgent-bg:    #fdecec;
  --lx-color-star:         #f5a623;   /* rating stars */
  --lx-color-ok:           #166534;
  --lx-color-warn-bg:      #fff7ed;
  --lx-color-warn-line:    #fed7aa;

  /* ── Space — 4px scale ───────────────────────────────────────────────── */
  --lx-space-1: 4px;
  --lx-space-2: 8px;
  --lx-space-3: 12px;
  --lx-space-4: 16px;
  --lx-space-5: 24px;
  --lx-space-6: 32px;
  --lx-space-7: 48px;
  --lx-space-8: 64px;

  /* ── Radius ──────────────────────────────────────────────────────────── */
  --lx-radius-sm: 8px;
  --lx-radius-md: 12px;
  --lx-radius-lg: 16px;
  --lx-radius-pill: 999px;

  /* ── Shadow ──────────────────────────────────────────────────────────── */
  --lx-shadow-1: 0 1px 2px rgba(20, 18, 15, 0.05), 0 1px 1px rgba(20, 18, 15, 0.03);
  --lx-shadow-2: 0 6px 20px rgba(20, 18, 15, 0.10), 0 2px 6px rgba(20, 18, 15, 0.05);
  --lx-shadow-3: 0 14px 40px rgba(20, 18, 15, 0.14), 0 4px 12px rgba(20, 18, 15, 0.07);

  /* ── Type ────────────────────────────────────────────────────────────── */
  --lx-font-sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --lx-font-serif: "Fraunces", Georgia, "Times New Roman", serif;   /* editorial display headings */
  --lx-text-xs:   12px;
  --lx-text-sm:   13.5px;
  --lx-text-base: 15px;
  --lx-text-lg:   17px;
  --lx-text-xl:   20px;
  --lx-text-2xl:  26px;
  --lx-leading:   1.45;
  --lx-weight-medium: 600;
  --lx-weight-bold:   700;
  --lx-weight-heavy:  800;

  /* ── Z-index scale ───────────────────────────────────────────────────── */
  --lx-z-map:     1;
  --lx-z-sticky:  10;
  --lx-z-popover: 30;
  --lx-z-modal:   1000;

  /* ── Layout knobs (Split View etc.) ──────────────────────────────────── */
  --lx-card-min:    250px;   /* results grid auto-fill minmax floor (tighter = more 2-up) */
  --lx-split-map-w: 36%;     /* map column width in Split View — narrower map, bigger tiles (ICND-style) */
  --lx-transition:  0.18s ease;
}
