/* ============================================================
 * livedropr — colors_and_type.css
 *
 * Canonical design tokens for the livedropr brand + product.
 * Mirrors tailwind.config.ts in the production codebase.
 *
 * Fonts: Plus Jakarta Sans (variable, self-hosted from fonts/).
 * The legacy <link href="...fonts.googleapis.com..."> include is
 * still accepted as a fallback for HTML files that haven't been
 * updated — the @font-face blocks below take precedence.
 * ============================================================ */

@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('fonts/PlusJakartaSans_wght_.ttf') format('truetype-variations'),
       url('fonts/PlusJakartaSans_wght_.ttf') format('truetype');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('fonts/PlusJakartaSans-Italic_wght_.ttf') format('truetype-variations'),
       url('fonts/PlusJakartaSans-Italic_wght_.ttf') format('truetype');
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ─── Section spacing (v5 polish) ─────────────────────────── */
  --section-pad-y:       clamp(56px, 7vw, 88px);

  /* ─── Brand color ─────────────────────────────────────────── */
  --brand-purple:        #7C3AED;
  --brand-purple-600:    #6D28D9;
  --brand-purple-700:    #5B21B6;
  --brand-purple-400:    #A78BFA;
  --brand-purple-300:    #C4B5FD;
  --brand-purple-100:    #EDE9FE;
  --brand-purple-50:     #F5F3FF;

  --brand-pink:          #EC4899;
  --brand-pink-400:      #F472B6;
  --brand-pink-300:      #F9A8D4;
  --brand-pink-100:      #FCE7F3;
  --brand-pink-50:       #FDF2F8;

  --brand-hot-pink:      #FF3B5C;   /* LIVE badge red-pink, the urgent one */

  /* ─── Surfaces — dark (Show Mode) ────────────────────────── */
  --bg-deep:             #0A0A0F;   /* body */
  --bg-elevated:         #1F2937;   /* cards (gray-800) */
  --bg-elevated-2:       #111827;   /* deeper card / sidebar (gray-900) */
  --border-default:      #374151;   /* gray-700 */
  --border-muted:        #1F2937;   /* gray-800, divider-on-card */
  --fg-on-dark:          #FFFFFF;
  --fg-on-dark-muted:    #D1D5DB;   /* gray-300 */
  --fg-on-dark-dim:      #9CA3AF;   /* gray-400 — labels, helper text */

  /* ─── Surfaces — light (Onboarding, marketing) ───────────── */
  --paper:               #F5F0E6;   /* cream — marketing canvas */
  --paper-lavender:      #F5F3FA;   /* lavender-tinted cream — section bg in marketing grid */
  --paper-peach:         #FAF2EA;   /* peachy variant */
  --bg-light:            #FFFFFF;
  --bg-light-2:          #F9FAFB;   /* gray-50 */
  --border-light:        #E5E7EB;   /* gray-200 */
  --border-light-strong: #D1D5DB;   /* gray-300 */
  --fg-on-light:         #0F172A;   /* slate-900, the near-black of the wordmark */
  --fg-on-light-muted:   #4B5563;   /* gray-600 */
  --fg-on-light-dim:     #6B7280;   /* gray-500 */

  /* ─── Semantic ───────────────────────────────────────────── */
  --ok:                  #22C55E;
  --ok-soft:             #14532D;   /* dark surface fill */
  --warn:                #F59E0B;
  --warn-soft:           #78350F;
  --err:                 #EF4444;
  --err-strong:          #DC2626;
  --err-bg-dark:         #7F1D1D;

  /* ─── Translucent callout fills (dark mode) ─────────────── */
  --callout-violet-bg:   rgba(76, 29, 149, 0.20);   /* violet-900 / 20 */
  --callout-violet-bd:   rgba(109, 40, 217, 0.30);  /* violet-700 / 30 */
  --callout-amber-bg:    rgba(120, 53, 15, 0.20);
  --callout-amber-bd:    rgba(180, 83, 9, 0.30);
  --callout-green-bg:    rgba(20, 83, 45, 0.20);
  --callout-green-bd:    rgba(21, 128, 61, 0.30);
  --callout-red-bg:      rgba(127, 29, 29, 0.20);
  --callout-red-bd:      rgba(185, 28, 28, 0.30);

  /* ─── Gradients (135deg unless noted) ────────────────────── */
  --brand-grad:          linear-gradient(135deg, #7C3AED 0%, #EC4899 100%);
  --brand-grad-soft:     linear-gradient(135deg, #A78BFA 0%, #F472B6 100%);
  --brand-grad-deep:     linear-gradient(135deg, #6D28D9 0%, #FF3B5C 100%);
  --brand-grad-h:        linear-gradient(90deg,  #7C3AED 0%, #EC4899 100%);
  --brand-grad-paper:    linear-gradient(135deg, #F5F0E6 0%, #F5F3FA 100%);

  /* ─── Spacing scale (matches Tailwind 4px) ───────────────── */
  --space-0:   0;
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;

  /* ─── Radii ──────────────────────────────────────────────── */
  --radius-sm:   6px;    /* inputs, chips */
  --radius-md:   8px;    /* default — buttons, dark cards */
  --radius-lg:   12px;   /* large cards, callouts */
  --radius-xl:   16px;   /* hero cards in marketing */
  --radius-2xl:  24px;   /* round dark product cards on cream */
  --radius-pill: 9999px; /* CTAs in marketing, badges, status */

  /* ─── Borders & shadow ───────────────────────────────────── */
  --bd-1: 1px solid var(--border-default);
  --bd-1-light: 1px solid var(--border-light);

  /* Only used on light surfaces — dark mode uses borders, not shadow */
  --shadow-sm:   0 1px 2px 0 rgba(15, 23, 42, 0.05);
  --shadow-md:   0 4px 12px -2px rgba(15, 23, 42, 0.08);
  --shadow-lg:   0 12px 32px -8px rgba(15, 23, 42, 0.12);
  --shadow-card-dark: 0 16px 48px -16px rgba(124, 58, 237, 0.35);
  /* purple-tinted lift for product cards floating on cream paper (marketing) */

  /* ─── Typography ─────────────────────────────────────────── */
  --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    800;

  /* Type scale — matches tailwind.config.ts */
  --fs-display:    40px;
  --lh-display:    1.1;
  --fw-display:    800;

  --fs-title:      28px;
  --lh-title:      1.2;
  --fw-title:      800;

  --fs-heading:    22px;
  --lh-heading:    1.3;
  --fw-heading:    800;

  --fs-subheading: 17px;
  --lh-subheading: 1.4;
  --fw-subheading: 700;

  --fs-body-lg:    18px;   /* Show Mode minimum */
  --lh-body-lg:    1.5;
  --fw-body-lg:    500;

  --fs-body:       14px;
  --lh-body:       1.5;
  --fw-body:       500;

  --fs-label:      11px;
  --lh-label:      1.2;
  --fw-label:      800;
  --tracking-label: 0.04em;

  /* Looser display sizes used in marketing hero (responsive scale) */
  --fs-hero:       56px;
  --lh-hero:       1.05;

  /* ─── Motion ─────────────────────────────────────────────── */
  --ease-out:      cubic-bezier(0.2, 0.8, 0.2, 1);
  --t-fast:        120ms;
  --t-base:        150ms;
  --t-slow:        220ms;
}

/* ============================================================
 * Base + semantic type classes
 * Use these in mocks/UI kits.
 * ============================================================ */

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-sans);
  font-weight: var(--fw-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-on-light);
  background: var(--bg-light);
}

/* Dark-mode wrapper used by Show Mode */
.theme-dark {
  background: var(--bg-deep);
  color: var(--fg-on-dark);
}
.theme-dark body { background: var(--bg-deep); color: var(--fg-on-dark); }

/* Show Mode minimum body — anything non-numeric is at least 18px */
.theme-dark { font-size: var(--fs-body-lg); }

/* Headings */
.t-display {
  font-family: var(--font-sans);
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  font-weight: var(--fw-display);
  letter-spacing: -0.01em;
}
.t-title {
  font-size: var(--fs-title);
  line-height: var(--lh-title);
  font-weight: var(--fw-title);
  letter-spacing: -0.01em;
}
.t-heading {
  font-size: var(--fs-heading);
  line-height: var(--lh-heading);
  font-weight: var(--fw-heading);
}
.t-subheading {
  font-size: var(--fs-subheading);
  line-height: var(--lh-subheading);
  font-weight: var(--fw-subheading);
}
.t-body-lg {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body-lg);
  font-weight: var(--fw-body-lg);
}
.t-body {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-body);
}
.t-label {
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  font-weight: var(--fw-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

/* Gradient text helper — used on hero accent words */
.t-grad {
  background: var(--brand-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.t-grad-deep {
  background: var(--brand-grad-deep);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ============================================================
 * Component utilities — minimal, named after the props they set
 * ============================================================ */

/* Buttons */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 12px 24px;
  background: var(--brand-purple);
  color: var(--fg-on-dark);
  font-weight: var(--fw-bold);
  font-size: var(--fs-subheading);
  border-radius: var(--radius-md);
  border: none;
  cursor: pointer;
  transition: background var(--t-base) var(--ease-out);
}
.btn-primary:hover { background: var(--brand-purple-600); }
.btn-primary:active { background: var(--brand-purple-700); }

.btn-grad {
  background: var(--brand-grad);
  border-radius: var(--radius-pill);
  padding: 14px 32px;
  color: var(--fg-on-dark);
  font-weight: var(--fw-bold);
  font-size: var(--fs-subheading);
  border: none;
  cursor: pointer;
  transition: opacity var(--t-base) var(--ease-out);
  display: inline-flex; align-items: center; gap: var(--space-2);
}
.btn-grad:hover { opacity: 0.92; }
.btn-grad:active { background: var(--brand-grad-deep); }

.btn-ghost-dark {
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  color: var(--fg-on-dark-muted);
  padding: 10px 14px;
  border-radius: var(--radius-md);
  font-weight: var(--fw-medium);
  cursor: pointer;
  transition: border-color var(--t-base);
}
.btn-ghost-dark:hover { border-color: #4B5563; }

/* The pink LIVE pill (and its red-dot variants) */
.badge-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--brand-hot-pink);
  color: var(--fg-on-dark);
  font-size: var(--fs-label);
  font-weight: var(--fw-black);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
}
.badge-live::before {
  /* small white circle "recording" dot when used inline */
  content: "";
  display: none;
  width: 6px; height: 6px;
  border-radius: var(--radius-pill);
  background: #fff;
}

.dot-live {
  width: 8px; height: 8px;
  border-radius: var(--radius-pill);
  background: var(--brand-hot-pink);
  animation: ld-pulse 1.6s var(--ease-out) infinite;
  display: inline-block;
  vertical-align: middle;
}
.dot-ok { background: var(--ok); }

@keyframes ld-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.55; transform: scale(0.85); }
}

/* Translucent callouts — the most reusable dark-mode pattern */
.callout-violet {
  background: var(--callout-violet-bg);
  border: 1px solid var(--callout-violet-bd);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}
.callout-amber {
  background: var(--callout-amber-bg);
  border: 1px solid var(--callout-amber-bd);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}
.callout-red {
  background: var(--callout-red-bg);
  border: 1px solid var(--callout-red-bd);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}

/* Cards */
.card-dark {
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}
.card-light {
  background: var(--bg-light);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}

/* Section numeral — purple circle, used in marketing/explainer grids */
.numeral {
  width: 36px; height: 36px;
  border-radius: var(--radius-pill);
  background: var(--brand-purple);
  color: var(--fg-on-dark);
  display: inline-flex;
  align-items: center; justify-content: center;
  font-weight: var(--fw-black);
  font-size: 18px;
}

/* Form inputs */
.input-light {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--border-light-strong);
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  color: var(--fg-on-light);
  background: var(--bg-light);
  transition: border-color var(--t-base), box-shadow var(--t-base);
}
.input-light:focus {
  outline: none;
  border-color: var(--brand-purple);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.12);
}

.input-dark {
  width: 100%;
  padding: 12px 16px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  color: var(--fg-on-dark);
  font-family: var(--font-sans);
  font-size: var(--fs-body-lg);
  transition: border-color var(--t-base), box-shadow var(--t-base);
}
.input-dark::placeholder { color: var(--fg-on-dark-dim); }
.input-dark:focus {
  outline: none;
  border-color: var(--brand-purple-400);
  box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.18);
}

/* Selectable chip (single + multi) */
.chip {
  display: inline-flex;
  align-items: center; gap: 6px;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-light-strong);
  background: var(--bg-light);
  color: var(--fg-on-light);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  cursor: pointer;
  transition: all var(--t-base) var(--ease-out);
}
.chip:hover { border-color: var(--brand-purple-400); }
.chip[aria-pressed="true"], .chip.is-selected {
  border-color: var(--brand-purple);
  background: var(--brand-purple-50);
  color: var(--brand-purple-600);
}