/* =========================================================================
   Let's Mapping — Core Tokens
   Dark-first, brutalist, light-as-material.
   --------------------------------------------------------------------------
   Philosophy: the palette is the room before projection — flat blacks and
   concrete greys. Color enters only as projected light: high-key cyan,
   magenta, lumen-white. Treat color as a verb, not decoration.
   ========================================================================= */

/* ---------- Web fonts -----------------------------------------------------
   Substitutions used in this system (flagged in README):
   - Display  → Space Grotesk (geometric, slightly mechanical, supports caps)
   - Body     → Inter? No — using IBM Plex Sans for a technical/industrial feel
   - Mono     → JetBrains Mono (specs, captions, timecode)
   ------------------------------------------------------------------------ */
@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=IBM+Plex+Sans:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500;700&display=swap");

:root {
  /* ===== Color — Base / surface ========================================= */
  --lm-void:        #050505;   /* deepest black — outdoor night, room before projection */
  --lm-black:       #0A0A0A;   /* canonical brand black, page bg */
  --lm-ink:         #111111;   /* card/section bg, raised one step */
  --lm-graphite:    #1A1A1A;   /* secondary surface, hover-down */
  --lm-iron:        #262626;   /* hairline-divider equivalent surface */
  --lm-concrete:    #3A3A3A;   /* dividers, low-contrast borders */
  --lm-steel:       #6B6B6B;   /* disabled text, captions */
  --lm-bone:        #B8B6B0;   /* muted body */
  --lm-paper:       #E8E5DE;   /* off-white, "wall before light" */
  --lm-lumen:       #FFFFFF;   /* pure projected light */

  /* ===== Color — Projected light (the "color enters" palette) ========== */
  --lm-beam-cyan:   #00E5FF;   /* primary accent: high-key projector cyan */
  --lm-beam-magenta:#FF2D6F;   /* secondary: reactive/sensor magenta */
  --lm-beam-amber:  #FFB020;   /* warning / spotlight warm */
  --lm-beam-acid:   #C6FF00;   /* tertiary: green-laser accent */
  --lm-beam-violet: #7A5CFF;   /* tertiary: UV/violet */

  /* ===== Semantic ======================================================= */
  --lm-bg:          var(--lm-black);
  --lm-bg-elev-1:   var(--lm-ink);
  --lm-bg-elev-2:   var(--lm-graphite);
  --lm-fg:          var(--lm-lumen);
  --lm-fg-1:        var(--lm-paper);
  --lm-fg-2:        var(--lm-bone);
  --lm-fg-3:        var(--lm-steel);
  --lm-border:      var(--lm-concrete);
  --lm-border-soft: var(--lm-iron);
  --lm-accent:      var(--lm-beam-cyan);
  --lm-accent-fg:   var(--lm-black);
  --lm-danger:      var(--lm-beam-magenta);
  --lm-warning:     var(--lm-beam-amber);

  /* ===== Type — families =============================================== */
  --lm-font-display: "Space Grotesk", "Inter", system-ui, sans-serif;
  --lm-font-body:    "IBM Plex Sans", "Inter", system-ui, sans-serif;
  --lm-font-mono:    "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace;

  /* ===== Type — scale (1920px reference, mobile via clamp where used) === */
  --lm-fs-display:   clamp(56px, 9vw, 168px); /* hero, full-bleed marquee */
  --lm-fs-h1:        clamp(40px, 5vw, 88px);
  --lm-fs-h2:        clamp(32px, 3.4vw, 56px);
  --lm-fs-h3:        28px;
  --lm-fs-h4:        20px;
  --lm-fs-body-lg:   18px;
  --lm-fs-body:      16px;
  --lm-fs-body-sm:   14px;
  --lm-fs-caption:   12px;
  --lm-fs-micro:     10px;   /* labels, timecode, ALL CAPS tags */

  /* tracking */
  --lm-tracking-tight:   -0.02em;  /* display */
  --lm-tracking-normal:  0;
  --lm-tracking-wide:    0.08em;   /* labels, eyebrow */
  --lm-tracking-widest:  0.22em;   /* micro caps, tags */

  /* line-height */
  --lm-lh-tight:     0.95;
  --lm-lh-snug:      1.1;
  --lm-lh-normal:    1.45;
  --lm-lh-loose:     1.65;

  /* ===== Spacing — 4px base ============================================ */
  --lm-s-0:   0;
  --lm-s-1:   4px;
  --lm-s-2:   8px;
  --lm-s-3:   12px;
  --lm-s-4:   16px;
  --lm-s-5:   24px;
  --lm-s-6:   32px;
  --lm-s-7:   48px;
  --lm-s-8:   64px;
  --lm-s-9:   96px;
  --lm-s-10:  128px;
  --lm-s-11:  192px;

  /* ===== Radius — minimal, brutalist =================================== */
  --lm-radius-0:  0px;      /* default. Sharp corners are the brand. */
  --lm-radius-1:  2px;      /* tiniest concession on tags/inputs */
  --lm-radius-2:  4px;      /* rare — used on inline pills only */
  --lm-radius-full: 999px;  /* circular indicator dots only */

  /* ===== Borders ======================================================= */
  --lm-bw-hair:   1px;
  --lm-bw:        1px;
  --lm-bw-bold:   2px;
  --lm-bw-heavy:  3px;

  /* ===== Shadow / Glow — light-as-projection =========================== */
  /* No drop shadows on dark — we use glow halos and inner-light strokes. */
  --lm-glow-cyan:    0 0 0 1px var(--lm-beam-cyan), 0 0 24px 0 rgba(0,229,255,.35);
  --lm-glow-magenta: 0 0 0 1px var(--lm-beam-magenta), 0 0 24px 0 rgba(255,45,111,.32);
  --lm-glow-soft:    0 0 32px 0 rgba(255,255,255,.06);
  --lm-glow-hero:    0 0 120px 0 rgba(0,229,255,.18), 0 0 240px 0 rgba(122,92,255,.10);
  --lm-shadow-card-light: 0 1px 0 rgba(255,255,255,.04) inset, 0 0 0 1px var(--lm-border-soft);

  /* ===== Motion ======================================================== */
  --lm-ease-out:    cubic-bezier(.16, 1, .3, 1);     /* fast attack, slow tail */
  --lm-ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --lm-ease-snap:   cubic-bezier(.2, .9, .1, 1);     /* shutter / projector */
  --lm-dur-flash:   90ms;
  --lm-dur-fast:    160ms;
  --lm-dur-base:    260ms;
  --lm-dur-slow:    520ms;
  --lm-dur-cinema:  1200ms;

  /* ===== Grid ========================================================== */
  --lm-grid-cols: 12;
  --lm-grid-gutter: 24px;
  --lm-grid-margin: 64px;
  --lm-grid-max:    1440px;
}

/* =========================================================================
   Base reset + semantic helpers
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--lm-bg); color: var(--lm-fg-1); }
body {
  font-family: var(--lm-font-body);
  font-size: var(--lm-fs-body);
  line-height: var(--lm-lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--lm-beam-cyan); color: var(--lm-black); }

/* ----- Display + headings -------------------------------------------------- */
.lm-display, h1.lm-display {
  font-family: var(--lm-font-display);
  font-weight: 600;
  font-size: var(--lm-fs-display);
  line-height: var(--lm-lh-tight);
  letter-spacing: var(--lm-tracking-tight);
  text-transform: uppercase;
  color: var(--lm-fg);
}
h1, .lm-h1 {
  font-family: var(--lm-font-display);
  font-weight: 600;
  font-size: var(--lm-fs-h1);
  line-height: var(--lm-lh-tight);
  letter-spacing: var(--lm-tracking-tight);
  text-transform: uppercase;
  margin: 0;
  color: var(--lm-fg);
}
h2, .lm-h2 {
  font-family: var(--lm-font-display);
  font-weight: 500;
  font-size: var(--lm-fs-h2);
  line-height: var(--lm-lh-snug);
  letter-spacing: var(--lm-tracking-tight);
  text-transform: uppercase;
  margin: 0;
  color: var(--lm-fg);
}
h3, .lm-h3 {
  font-family: var(--lm-font-display);
  font-weight: 500;
  font-size: var(--lm-fs-h3);
  line-height: var(--lm-lh-snug);
  margin: 0;
  color: var(--lm-fg);
}
h4, .lm-h4 {
  font-family: var(--lm-font-body);
  font-weight: 600;
  font-size: var(--lm-fs-h4);
  line-height: var(--lm-lh-snug);
  margin: 0;
  color: var(--lm-fg);
}

/* ----- Body, lead, captions ------------------------------------------------ */
p, .lm-p {
  font-size: var(--lm-fs-body);
  line-height: var(--lm-lh-normal);
  color: var(--lm-fg-2);
  margin: 0;
}
.lm-lead {
  font-size: var(--lm-fs-body-lg);
  line-height: var(--lm-lh-normal);
  color: var(--lm-fg-1);
  max-width: 62ch;
}
.lm-caption {
  font-size: var(--lm-fs-caption);
  line-height: var(--lm-lh-normal);
  color: var(--lm-fg-3);
}

/* ----- Eyebrow / label / micro caps --------------------------------------- */
.lm-eyebrow {
  font-family: var(--lm-font-mono);
  font-size: var(--lm-fs-caption);
  letter-spacing: var(--lm-tracking-widest);
  text-transform: uppercase;
  color: var(--lm-fg-3);
}
.lm-tag {
  font-family: var(--lm-font-mono);
  font-size: var(--lm-fs-micro);
  letter-spacing: var(--lm-tracking-widest);
  text-transform: uppercase;
  color: var(--lm-fg-2);
  border: var(--lm-bw) solid var(--lm-border);
  padding: 4px 8px;
  display: inline-block;
}
.lm-mono { font-family: var(--lm-font-mono); }
.lm-num  { font-family: var(--lm-font-mono); font-variant-numeric: tabular-nums; }

/* ----- Code ---------------------------------------------------------------- */
code, .lm-code {
  font-family: var(--lm-font-mono);
  font-size: 0.92em;
  background: var(--lm-bg-elev-2);
  border: var(--lm-bw) solid var(--lm-border-soft);
  padding: 0.1em 0.4em;
  color: var(--lm-beam-cyan);
}

/* ----- Links --------------------------------------------------------------- */
a, .lm-link {
  color: var(--lm-fg);
  text-decoration: none;
  border-bottom: var(--lm-bw) solid var(--lm-beam-cyan);
  transition: color var(--lm-dur-fast) var(--lm-ease-out),
              border-color var(--lm-dur-fast) var(--lm-ease-out);
}
a:hover, .lm-link:hover { color: var(--lm-beam-cyan); }

/* ----- Divider ------------------------------------------------------------- */
.lm-rule { height: 1px; background: var(--lm-border-soft); border: 0; }
.lm-rule-strong { height: 1px; background: var(--lm-fg); border: 0; }