/* ============================================================
   LivingLab Design System — Colors & Type
   FBRC.AI / LivingLab — March 2026

   The system is editorial-first: a manifesto on warm paper.
   Bone backgrounds, ink text, and one signature gradient
   (rose → peach) drawn from the FBRC mark. Everything else
   stays restrained so the writing — and the work — speak.
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500&display=swap");

:root {
  /* ─── Brand ─────────────────────────────────────────── */
  --ll-rose:      #F390B9;   /* FBRC gradient start */
  --ll-peach:     #F7A37F;   /* FBRC gradient end   */
  --ll-ember:     #FF2D20;   /* FBRC signal red — borders, marks */
  --ll-navy:      #0D2545;   /* Investor / editorial stamp navy */
  --ll-fbrc-gradient: linear-gradient(180deg, var(--ll-rose) 0%, var(--ll-peach) 100%);
  --ll-fbrc-gradient-h: linear-gradient(90deg,  var(--ll-rose) 0%, var(--ll-peach) 100%);

  /* ─── Neutrals — the paper ──────────────────────────── */
  --ll-bone:      #F6F1E9;   /* Primary background — warm paper */
  --ll-shell:     #ECE6DA;   /* Card / surface on bone */
  --ll-mist:      #DCD6CA;   /* Subtle dividers, hairlines */
  --ll-silt:      #A6A199;   /* Disabled, captions */
  --ll-stone:     #6B6960;   /* Secondary text, metadata */
  --ll-ash:       #2A2A30;   /* Strong dark on light backgrounds */
  --ll-ink:       #0B0B0E;   /* Primary text — near-black */

  /* On dark surfaces */
  --ll-onyx:      #1A1A2E;   /* Editorial dark surface */
  --ll-pitch:     #0A0A0F;   /* Deepest dark, lab background */
  --ll-paper-dim: rgba(246, 241, 233, 0.72); /* bone @ 72 % for dim text on dark */

  /* ─── Foreground tokens ─────────────────────────────── */
  --ll-fg-1:      var(--ll-ink);    /* H1, body emphasis */
  --ll-fg-2:      var(--ll-ash);    /* H2, body */
  --ll-fg-3:      var(--ll-stone);  /* secondary, captions */
  --ll-fg-4:      var(--ll-silt);   /* meta, disabled */
  --ll-fg-inv:    var(--ll-bone);   /* on dark surfaces */

  /* ─── Background tokens ─────────────────────────────── */
  --ll-bg-1:      var(--ll-bone);   /* canvas */
  --ll-bg-2:      var(--ll-shell);  /* cards */
  --ll-bg-3:      #FFFFFF;          /* elevated, "page" white */
  --ll-bg-inv:    var(--ll-onyx);   /* dark surface */
  --ll-bg-pitch:  var(--ll-pitch);  /* full-bleed lab */

  /* ─── Stroke tokens ─────────────────────────────────── */
  --ll-stroke:    var(--ll-mist);
  --ll-stroke-strong: #C5BEB0;
  --ll-stroke-ink: var(--ll-ink);

  /* ─── Semantic ──────────────────────────────────────── */
  --ll-success:   #5D7C5D;   /* moss green */
  --ll-warning:   #C77A2B;   /* burnt amber */
  --ll-danger:    var(--ll-ember);
  --ll-info:      var(--ll-navy);

  /* Product accents — each LivingLab product gets one mark colour */
  --ll-prod-hans:       var(--ll-ember);    /* the showrunner: signal red */
  --ll-prod-worldbldr:  var(--ll-navy);     /* digital twin: blueprint navy */
  --ll-prod-emergentic: #1B3A36;            /* deep forest — characters/narrative */
  --ll-prod-getinvite:  #C44E2B;            /* terracotta — tickets / atoms */

  /* ─── Type ──────────────────────────────────────────── */
  --ll-font-display: "Instrument Serif", "Georgia", "Times New Roman", serif;
  --ll-font-sans:    "Geist", "Inter", system-ui, -apple-system, sans-serif;
  --ll-font-mono:    "Geist Mono", "JetBrains Mono", ui-monospace, "SF Mono", monospace;

  /* Type scale — generous editorial */
  --ll-fs-display-xl: clamp(56px, 8vw, 124px);
  --ll-fs-display-l:  clamp(44px, 6vw, 88px);
  --ll-fs-display-m:  clamp(36px, 4.5vw, 64px);
  --ll-fs-h1:         42px;
  --ll-fs-h2:         30px;
  --ll-fs-h3:         22px;
  --ll-fs-h4:         18px;
  --ll-fs-body-l:     18px;
  --ll-fs-body:       16px;
  --ll-fs-body-s:     14px;
  --ll-fs-caption:    12px;
  --ll-fs-tag:        11px;  /* mono tags */

  /* Letter-spacing & line-height */
  --ll-lh-display:    0.95;
  --ll-lh-heading:    1.1;
  --ll-lh-body:       1.55;
  --ll-tracking-tag:  0.14em;
  --ll-tracking-eyebrow: 0.18em;

  /* ─── Radii ─────────────────────────────────────────── */
  --ll-radius-xs: 2px;
  --ll-radius-sm: 4px;
  --ll-radius-md: 8px;
  --ll-radius-lg: 14px;
  --ll-radius-xl: 22px;
  --ll-radius-pill: 999px;

  /* ─── Shadows — restrained, paper-like ──────────────── */
  --ll-shadow-sm: 0 1px 2px rgba(11, 11, 14, 0.06), 0 1px 1px rgba(11, 11, 14, 0.04);
  --ll-shadow-md: 0 2px 4px rgba(11, 11, 14, 0.06), 0 8px 18px rgba(11, 11, 14, 0.08);
  --ll-shadow-lg: 0 4px 8px rgba(11, 11, 14, 0.08), 0 20px 40px rgba(11, 11, 14, 0.12);
  --ll-shadow-press: inset 0 1px 2px rgba(11, 11, 14, 0.12);

  /* ─── Spacing — 4-pt base ───────────────────────────── */
  --ll-space-1: 4px;
  --ll-space-2: 8px;
  --ll-space-3: 12px;
  --ll-space-4: 16px;
  --ll-space-5: 24px;
  --ll-space-6: 32px;
  --ll-space-7: 48px;
  --ll-space-8: 64px;
  --ll-space-9: 96px;

  /* ─── Motion ────────────────────────────────────────── */
  --ll-ease-out:  cubic-bezier(0.2, 0.7, 0.2, 1);
  --ll-ease-in:   cubic-bezier(0.7, 0.0, 0.84, 0.0);
  --ll-ease-soft: cubic-bezier(0.4, 0.0, 0.2, 1);
  --ll-dur-fast:  120ms;
  --ll-dur:       220ms;
  --ll-dur-slow:  420ms;
}

/* =============================================================
   Semantic element styles — opt-in via `.ll-prose` or applied
   inside any UI kit container.
   ============================================================= */

.ll-prose,
.ll-prose * { font-family: var(--ll-font-sans); }
.ll-prose { color: var(--ll-fg-2); line-height: var(--ll-lh-body); font-size: var(--ll-fs-body); }

.ll-prose h1, .ll-h1 {
  font-family: var(--ll-font-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--ll-fs-display-l);
  line-height: var(--ll-lh-display);
  color: var(--ll-fg-1);
  letter-spacing: -0.01em;
  margin: 0 0 var(--ll-space-5);
}

.ll-prose h2, .ll-h2 {
  font-family: var(--ll-font-display);
  font-weight: 400;
  font-size: var(--ll-fs-display-m);
  line-height: var(--ll-lh-heading);
  color: var(--ll-fg-1);
  letter-spacing: -0.005em;
  margin: var(--ll-space-7) 0 var(--ll-space-4);
}

.ll-prose h3, .ll-h3 {
  font-family: var(--ll-font-sans);
  font-weight: 600;
  font-size: var(--ll-fs-h3);
  line-height: var(--ll-lh-heading);
  color: var(--ll-fg-1);
  margin: var(--ll-space-6) 0 var(--ll-space-3);
}

.ll-prose h4, .ll-h4 {
  font-family: var(--ll-font-sans);
  font-weight: 500;
  font-size: var(--ll-fs-h4);
  color: var(--ll-fg-1);
  margin: var(--ll-space-5) 0 var(--ll-space-2);
}

.ll-prose p { margin: 0 0 var(--ll-space-4); color: var(--ll-fg-2); }
.ll-prose strong { color: var(--ll-fg-1); font-weight: 600; }
.ll-prose em { font-family: var(--ll-font-display); font-style: italic; font-size: 1.06em; }

/* Eyebrow — the all-caps mono tag used for section numbers and labels */
.ll-eyebrow {
  font-family: var(--ll-font-mono);
  font-size: var(--ll-fs-tag);
  text-transform: uppercase;
  letter-spacing: var(--ll-tracking-eyebrow);
  color: var(--ll-fg-3);
  font-weight: 500;
}

/* Pull-quote — the manifesto voice */
.ll-pullquote {
  font-family: var(--ll-font-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--ll-fs-display-m);
  line-height: 1.15;
  color: var(--ll-fg-1);
  border-left: 3px solid var(--ll-ember);
  padding: var(--ll-space-3) 0 var(--ll-space-3) var(--ll-space-5);
}

/* Mono tag (chip) */
.ll-tag {
  font-family: var(--ll-font-mono);
  font-size: var(--ll-fs-tag);
  text-transform: uppercase;
  letter-spacing: var(--ll-tracking-tag);
  color: var(--ll-fg-3);
}

/* Body utility */
.ll-body  { font-family: var(--ll-font-sans); font-size: var(--ll-fs-body);   line-height: var(--ll-lh-body); color: var(--ll-fg-2); }
.ll-body-l{ font-family: var(--ll-font-sans); font-size: var(--ll-fs-body-l); line-height: 1.5;               color: var(--ll-fg-2); }
.ll-body-s{ font-family: var(--ll-font-sans); font-size: var(--ll-fs-body-s); line-height: 1.5;               color: var(--ll-fg-3); }
.ll-caption{font-family: var(--ll-font-sans); font-size: var(--ll-fs-caption);line-height: 1.4;               color: var(--ll-fg-3); }

/* Base reset shipped with the system */
.ll-canvas {
  background: var(--ll-bg-1);
  color: var(--ll-fg-1);
  font-family: var(--ll-font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}