/* ============================================================
   LiveBrand.ai — Design Tokens
   Source of truth: design/LiveBrand_Design_Guide_dc.html
   "Personal brand, always on air." — Clean (Apple) · Warm (Coke) · Precise (Tesla)

   These custom properties are the ONLY approved values. Never hard-code a
   hex, size, or radius in product code — reference a token below.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Inter:wght@300;400;500;600&family=Playfair+Display:wght@500&family=Space+Grotesk:wght@400;500;600&display=swap');

:root {
  /* ---- Grounds ---------------------------------------------------- */
  --lb-ground-white: #FFFFFF;   /* Primary ground — product & marketing */
  --lb-ground-cream: #F5F1E8;   /* Editorial ground — lifestyle contexts */
  --lb-ground-black: #0A0A0A;   /* Dark mode / reversed ground */

  /* ---- Warm-neutral ink ramp ------------------------------------- */
  --lb-ink-900: #12100E;  /* Headlines, primary text */
  --lb-ink-700: #35302A;  /* Subheads, dark surfaces */
  --lb-ink-500: #6B655C;  /* Muted / secondary text */
  --lb-ink-300: #B4ADA1;  /* Placeholders, captions */
  --lb-ink-100: #E7E1D6;  /* Subtle fills */
  --lb-hairline: #E4DED2; /* Borders & dividers everywhere */
  --lb-hairline-soft: #F0EBE1; /* Inner table/row dividers */

  /* ---- Accent — the on-air signal (use sparingly) ---------------- */
  --lb-accent: #2E63FF;        /* Electric Blue — live dot, primary CTA, focus */
  --lb-accent-hover: #1E45C8;  /* Blue-Deep — hover / pressed */
  --lb-accent-soft: #E6ECFF;   /* Blue-Soft — selected states, focus ring, tints */

  /* ---- Semantic tokens ------------------------------------------- */
  --lb-bg: var(--lb-ground-white);   /* Page ground */
  --lb-surface: #FFFFFF;             /* Cards & panels, separated by border */
  --lb-text-primary: var(--lb-ink-900);
  --lb-text-muted: var(--lb-ink-500);
  --lb-border: var(--lb-hairline);
  --lb-focus-ring: var(--lb-accent-soft);
  --lb-success: #1F9D63;  /* Positive states, online status */
  --lb-warning: #E0A100;  /* Caution states */
  --lb-danger:  #D92D20;  /* Errors — kept red, never reads as accent */

  /* ---- Typefaces -------------------------------------------------- */
  --lb-font-display: 'Fraunces', Georgia, 'Times New Roman', serif;   /* Headlines */
  --lb-font-serif:   'Playfair Display', Georgia, serif;              /* "Brand" wordmark */
  --lb-font-label:   'Space Grotesk', ui-sans-serif, system-ui, sans-serif; /* Eyebrows, labels, LIVE tag */
  --lb-font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* Body & UI */

  /* ---- Type scale (size / line-height / tracking) ---------------- */
  /* Display-XL — Fraunces 500 */
  --lb-display-xl-size: 3.75rem;  /* 60px */
  --lb-display-xl-lh: 1.05;
  --lb-display-xl-ls: -0.01em;
  /* Display — Fraunces 500 */
  --lb-display-size: 3rem;        /* 48px */
  --lb-display-lh: 1.1;
  --lb-display-ls: -0.01em;
  /* H1 — Fraunces 500 */
  --lb-h1-size: 2.25rem;          /* 36px */
  --lb-h1-lh: 1.15;
  /* H2 — Fraunces 500 */
  --lb-h2-size: 1.75rem;          /* 28px */
  --lb-h2-lh: 1.2;
  /* H3 — Inter 600 */
  --lb-h3-size: 1.375rem;         /* 22px */
  --lb-h3-lh: 1.3;
  /* Body-L — Inter 400 */
  --lb-body-l-size: 1.125rem;     /* 18px */
  --lb-body-l-lh: 1.6;
  /* Body — Inter 400 */
  --lb-body-size: 1rem;           /* 16px */
  --lb-body-lh: 1.6;
  /* Small — Inter 400 */
  --lb-small-size: 0.875rem;      /* 14px */
  --lb-small-lh: 1.5;
  /* Caption — Space Grotesk 500, uppercase */
  --lb-caption-size: 0.75rem;     /* 12px */
  --lb-caption-lh: 1.4;
  --lb-caption-ls: 0.08em;

  /* ---- Font weights ---------------------------------------------- */
  --lb-fw-light: 300;   /* "Live" inside the logo circle */
  --lb-fw-regular: 400;
  --lb-fw-medium: 500;
  --lb-fw-semibold: 600;

  /* ---- Spacing — 8pt grid ---------------------------------------- */
  /* space-4 exists only for icon→label gaps and hairline offsets. */
  --lb-space-4: 0.25rem;   /* 4px  */
  --lb-space-8: 0.5rem;    /* 8px  */
  --lb-space-12: 0.75rem;  /* 12px */
  --lb-space-16: 1rem;     /* 16px */
  --lb-space-24: 1.5rem;   /* 24px */
  --lb-space-32: 2rem;     /* 32px */
  --lb-space-48: 3rem;     /* 48px */
  --lb-space-64: 4rem;     /* 64px */
  --lb-space-96: 6rem;     /* 96px */
  --lb-space-128: 8rem;    /* 128px */

  /* ---- Radius ----------------------------------------------------- */
  --lb-radius-sm: 8px;     /* Inputs, badges */
  --lb-radius-md: 12px;    /* Buttons, swatches */
  --lb-radius-lg: 20px;    /* Cards, modals */
  --lb-radius-pill: 999px; /* Pills, avatars, LIVE tag */

  /* ---- Elevation -------------------------------------------------- */
  /* Flat by default: surfaces separate with hairline borders, never shadows. */
  --lb-elevation-0: none;
  --lb-elevation-overlay: 0 8px 30px rgba(18, 16, 14, 0.10); /* Overlays & popovers ONLY */

  /* ---- Layout ----------------------------------------------------- */
  --lb-container: 1160px;
  --lb-transition: 160ms ease;
}

/* Dark / reversed ground — apply .lb-dark to a subtree or <body>. */
.lb-dark {
  --lb-bg: var(--lb-ground-black);
  --lb-surface: #16140F;
  --lb-text-primary: #FFFFFF;
  --lb-text-muted: #B4ADA1;
  --lb-border: #2A2620;
  --lb-hairline: #2A2620;
  --lb-hairline-soft: #221F19;
}