/* ============================================================
   LaunchLab · Colors & Type
   Extracted from Launch Planner product code.
   Import this file to get the full foundation.
   ============================================================ */

:root {
  /* ---------- Surfaces & neutrals ---------- */
  --ll-bg:            #F7F8FB;   /* app background */
  --ll-surface:       #FFFFFF;   /* cards, modals, topbar */
  --ll-surface-2:     #F1F3F8;   /* sunken wells, inputs, segments */

  --ll-border:        #E6E9F0;   /* default hairline */
  --ll-border-strong: #D5DAE4;   /* hover / emphasized borders */

  /* ---------- Text scale ---------- */
  --ll-text:          #1A2236;   /* primary — headings, body */
  --ll-text-2:        #4A5578;   /* secondary — labels, muted body */
  --ll-text-3:        #7A849B;   /* tertiary — meta, timestamps */
  --ll-text-muted:    #A0A8BD;   /* placeholders, disabled */

  /* ---------- Sidebar (navy) ---------- */
  --ll-sidebar-bg:         #1E2A4A;
  --ll-sidebar-bg-2:       #18213A;
  --ll-sidebar-text:       #B8C0D9;
  --ll-sidebar-text-active:#FFFFFF;
  --ll-sidebar-hover:      #28345A;

  /* ---------- Brand accent (teal — default theme) ---------- */
  --ll-accent:        #14B8A6;
  --ll-accent-soft:   #CCFBF1;
  --ll-accent-text:   #0F766E;
  --ll-accent-2:      #3B82F6;   /* blue — paired with teal in gradients */

  /* ---------- Card / content type colors (from launch planner) ---------- */
  --ll-type-email:       #14B8A6; --ll-type-email-bg:    #CCFBF1; --ll-type-email-text:    #0D6B63;
  --ll-type-announce:    #8B5CF6; --ll-type-announce-bg: #EDE4FE; --ll-type-announce-text: #5B3BA8;
  --ll-type-note:        #F59E0B; --ll-type-note-bg:     #FEF3C7; --ll-type-note-text:     #92540C;
  --ll-type-landing:     #EC4899; --ll-type-landing-bg:  #FCE7F3; --ll-type-landing-text:  #9D1D5C;

  /* ---------- Stage colors (warmup → sales → close) ---------- */
  --ll-stage-warmup:  #3B82F6;   /* blue — anticipation */
  --ll-stage-sales:   #14B8A6;   /* teal — live / broadcast */
  --ll-stage-close:   #F59E0B;   /* amber — closing / urgency */

  /* ---------- Semantic ---------- */
  --ll-success:       #059669;
  --ll-warn:          #D97706;
  --ll-danger:        #DC2626;
  --ll-danger-bg:     #FEE2E2;

  /* ---------- Elevation ---------- */
  --ll-shadow-sm:   0 1px 2px rgba(26, 34, 54, 0.04);
  --ll-shadow-md:   0 2px 8px rgba(26, 34, 54, 0.06), 0 1px 2px rgba(26, 34, 54, 0.04);
  --ll-shadow-lg:   0 10px 30px rgba(26, 34, 54, 0.08), 0 4px 8px rgba(26, 34, 54, 0.04);
  --ll-shadow-drag: 0 16px 40px rgba(20, 184, 166, 0.22), 0 4px 12px rgba(26, 34, 54, 0.08);

  /* ---------- Radii ---------- */
  --ll-radius-sm: 6px;
  --ll-radius:    10px;
  --ll-radius-lg: 14px;
  --ll-radius-xl: 20px;
  --ll-radius-pill: 999px;

  /* ---------- Spacing (implicit scale used throughout) ---------- */
  --ll-space-1:  4px;
  --ll-space-2:  6px;
  --ll-space-3:  8px;
  --ll-space-4:  10px;
  --ll-space-5:  12px;
  --ll-space-6:  14px;
  --ll-space-7:  16px;
  --ll-space-8:  20px;
  --ll-space-9:  24px;

  /* ---------- Typography families ---------- */
  --ll-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ll-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ---------- Typography tokens ----------
     Sizes are intentionally small — this is a dense workspace UI.
     Feel: compact, calm, confident. Tight letter-spacing on headings.   */
  --ll-fs-xs:    10.5px;   /* uppercase section labels */
  --ll-fs-sm:    11.5px;   /* meta, captions */
  --ll-fs-base:  13px;     /* body in UI chrome */
  --ll-fs-md:    13.5px;   /* card titles, form inputs */
  --ll-fs-lg:    15px;     /* column titles, modal heads */
  --ll-fs-h2:    22px;     /* board title */
  --ll-fs-h1:    28px;     /* launches page title */
  --ll-fs-hero:  30px;     /* landing editor h1 */

  --ll-lh-tight: 1.2;
  --ll-lh-snug:  1.3;
  --ll-lh-body:  1.45;
  --ll-lh-prose: 1.65;

  --ll-track-tight:  -0.02em;  /* large headings */
  --ll-track-snug:   -0.01em;  /* card titles, meta b */
  --ll-track-loose:   0.08em;  /* UPPERCASE section labels */
  --ll-track-kbd:     0.04em;  /* day-num chip, codes */
}

/* ============================================================
   Semantic element defaults
   ============================================================ */
html, body {
  margin: 0;
  padding: 0;
  font-family: var(--ll-font-sans);
  font-size: var(--ll-fs-base);
  line-height: var(--ll-lh-body);
  color: var(--ll-text);
  background: var(--ll-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Headings — compact, confident, slightly tracked-in */
h1, .ll-h1 {
  font-size: var(--ll-fs-h1);
  font-weight: 700;
  letter-spacing: var(--ll-track-snug);
  line-height: var(--ll-lh-tight);
  margin: 0;
}
h2, .ll-h2 {
  font-size: var(--ll-fs-h2);
  font-weight: 600;
  letter-spacing: var(--ll-track-tight);
  line-height: var(--ll-lh-snug);
  margin: 0;
}
h3, .ll-h3 {
  font-size: var(--ll-fs-lg);
  font-weight: 600;
  letter-spacing: var(--ll-track-snug);
  margin: 0;
}

/* Body */
p, .ll-body { font-size: var(--ll-fs-base); line-height: var(--ll-lh-body); color: var(--ll-text); margin: 0; }
.ll-body-2   { font-size: var(--ll-fs-base); color: var(--ll-text-2); line-height: var(--ll-lh-body); }
.ll-muted    { color: var(--ll-text-3); }

/* Meta / uppercase section labels (heavy in the UI) */
.ll-eyebrow, .ll-label {
  font-size: var(--ll-fs-xs);
  font-weight: 600;
  letter-spacing: var(--ll-track-loose);
  text-transform: uppercase;
  color: var(--ll-text-3);
}

/* Mono — dates, day numbers, tech codes, timers */
.ll-mono, code, kbd, samp {
  font-family: var(--ll-font-mono);
  font-size: 0.92em;
}

/* ============================================================
   Utility — card shell (the workspace unit)
   ============================================================ */
.ll-card {
  background: var(--ll-surface);
  border: 1px solid var(--ll-border);
  border-radius: var(--ll-radius);
  box-shadow: var(--ll-shadow-sm);
}