/* ==========================================================================
   LUCID LENS — Design Tokens
   Monochrome system: black, off-white, four grays, one detail accent.
   Type: Bricolage Grotesque (display) + Hanken Grotesk (body/UI).
   ========================================================================== */

:root {
  /* ---- Color: base ---- */
  --c-black:        #070707;
  --c-black-soft:   #0e0e0d;
  --c-panel:        #141413;
  --c-panel-raised: #1b1b19;
  --c-line:         #2a2a27;
  --c-line-soft:    #1f1f1d;

  --c-white:        #f4f3ef;
  --c-white-dim:    #d9d8d2;

  --c-gray-100:     #b9b7b0;
  --c-gray-200:     #8f8d86;
  --c-gray-300:     #6b6965;

  /* the one "detail" accent — warm-neutral gray, never saturated */
  --c-accent:       #a8a49a;
  --c-accent-dim:   #6f6c64;

  /* ---- Semantic ---- */
  --bg:             var(--c-black);
  --bg-raised:      var(--c-panel);
  --fg:             var(--c-white);
  --fg-muted:       var(--c-gray-100);
  --fg-faint:       var(--c-gray-300);
  --border:         var(--c-line);
  --accent:         var(--c-accent);

  /* ---- Type families ---- */
  --font-display: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "Hanken Grotesk", monospace;

  /* ---- Type scale (fluid) ---- */
  --fs-2xs:  0.6875rem;
  --fs-xs:   0.8125rem;
  --fs-sm:   0.9375rem;
  --fs-md:   1.0625rem;
  --fs-lg:   1.3125rem;
  --fs-xl:   clamp(1.75rem, 1.4rem + 1.6vw, 2.75rem);
  --fs-2xl:  clamp(2.5rem, 1.8rem + 3vw, 4.5rem);
  --fs-3xl:  clamp(3.25rem, 2.2rem + 5vw, 7rem);
  --fs-4xl:  clamp(2.75rem, 1.3rem + 8.5vw, 10.5rem);

  --lh-tight: 0.98;
  --lh-snug:  1.15;
  --lh-normal:1.5;
  --lh-loose: 1.7;

  --ls-tight: -0.03em;
  --ls-normal: 0;
  --ls-wide: 0.08em;
  --ls-wider: 0.22em;

  /* ---- Spacing (4px base) ---- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4.5rem;
  --sp-9: 6.5rem;
  --sp-10: 9rem;

  --container-max: 1440px;
  --gutter: clamp(1.25rem, 4vw, 4rem);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 220ms;
  --dur-med: 480ms;
  --dur-slow: 900ms;

  /* ---- Effects ---- */
  --radius-sm: 3px;
  --radius-md: 6px;
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--c-white);
}