/* ═══════════════════════════════════════════════════════
   INMICON – Design Tokens
   ═══════════════════════════════════════════════════════ */

:root {
  /* ── Colors ── */
  --clr-bg:          #0a0f14;
  --clr-surface:     #111920;
  --clr-surface-2:   #19232d;
  --clr-border:      #243040;
  --clr-text:        #d4dce6;
  --clr-text-muted:  #7e91a5;
  --clr-heading:     #f0f4f8;
  --clr-accent:      #00c9a7;
  --clr-accent-dim:  rgba(0, 201, 167, 0.12);
  --clr-accent-glow: rgba(0, 201, 167, 0.25);
  --clr-error:       #ff6b6b;
  --clr-success:     #00c9a7;

  /* ── Typography ── */
  --font-body:    'DM Sans', system-ui, -apple-system, sans-serif;
  --font-display: 'Instrument Serif', Georgia, serif;

  /* ── Layout ── */
  --max-w:  1140px;
  --space:  clamp(1.5rem, 4vw, 3rem);

  /* ── Transitions ── */
  --ease-out:  cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-snap: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Shadows ── */
  --shadow-sm:  0 2px 8px rgba(0, 0, 0, 0.2);
  --shadow-md:  0 8px 30px rgba(0, 0, 0, 0.3);
  --shadow-lg:  0 20px 60px rgba(0, 0, 0, 0.4);
  --shadow-glow: 0 8px 30px var(--clr-accent-glow);

  /* ── Border Radius ── */
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   14px;
  --radius-pill: 100px;
}