/* ─────────────────────────────────────────────────────────────────
   Meetzen — Design Tokens
   Calm, premium, ADHD-friendly. Symmetrically aligned.
   ───────────────────────────────────────────────────────────────── */
:root {
  /* color: brand */
  --c-brand-50:  #eef0ff;
  --c-brand-100: #dde2ff;
  --c-brand-200: #bcc6ff;
  --c-brand-300: #94a4ff;
  --c-brand-400: #7382ff;
  --c-brand-500: #5b6cff;
  --c-brand-600: #4654e0;
  --c-brand-700: #3b46b8;
  --c-brand-800: #2f388f;

  /* accent: calming teal/jade */
  --c-accent-400: #54d4c1;
  --c-accent-500: #2cc1aa;
  --c-accent-600: #1ea58f;

  /* warm focus glow */
  --c-warm-400: #ffb27c;
  --c-warm-500: #ff9457;

  /* neutrals (light) */
  --c-bg:        #fbfbfd;
  --c-bg-soft:   #f4f5fa;
  --c-surface:   #ffffff;
  --c-surface-2: #f7f8fc;
  --c-line:      #e7e9f2;
  --c-line-soft: #eff1f8;
  --c-text:      #1a1d33;
  --c-text-soft: #4a4f6b;
  --c-text-mute: #7d83a1;
  --c-text-faint:#aab0c8;

  /* semantic */
  --c-ok:   #25c372;
  --c-warn: #f5a524;
  --c-err:  #ef4761;
  --c-info: #5b9eff;

  /* radii */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 24px;
  --r-2xl: 32px;
  --r-pill: 999px;

  /* shadows (soft, calm) */
  --sh-1: 0 1px 2px rgba(20, 24, 60, 0.04), 0 1px 1px rgba(20,24,60,.03);
  --sh-2: 0 4px 14px rgba(20, 24, 60, 0.06), 0 1px 2px rgba(20,24,60,.04);
  --sh-3: 0 12px 32px rgba(20, 24, 60, 0.08), 0 2px 6px rgba(20,24,60,.04);
  --sh-glow: 0 10px 40px rgba(91,108,255, 0.25);

  /* type */
  --f-sans: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --f-display: "Inter", "Segoe UI", system-ui, sans-serif;
  --f-mono: ui-monospace, "JetBrains Mono", "SF Mono", "Cascadia Code", Consolas, monospace;

  --fs-xs:   12px;
  --fs-sm:   13.5px;
  --fs-base: 15px;
  --fs-md:   17px;
  --fs-lg:   20px;
  --fs-xl:   26px;
  --fs-2xl:  34px;
  --fs-3xl:  46px;
  --fs-4xl:  60px;

  --lh-tight: 1.15;
  --lh-snug:  1.35;
  --lh-base:  1.55;
  --lh-loose: 1.7;

  /* spacing scale */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-7: 32px; --s-8: 40px; --s-9: 56px; --s-10: 72px;
  --s-11: 96px;

  /* layout */
  --container: 1200px;
  --container-narrow: 920px;

  /* motion */
  --ease-out: cubic-bezier(.2,.7,.2,1);
  --ease-soft: cubic-bezier(.4,0,.2,1);
  --t-fast: 140ms;
  --t-base: 220ms;
  --t-slow: 420ms;
}

/* ─── Dark theme ───────────────────────────────────────── */
[data-theme="dark"] {
  --c-bg:        #0d0f1a;
  --c-bg-soft:   #131626;
  --c-surface:   #161a2b;
  --c-surface-2: #1c2138;
  --c-line:      #232844;
  --c-line-soft: #1d2238;
  --c-text:      #e9ecf8;
  --c-text-soft: #b6bbd6;
  --c-text-mute: #8990b1;
  --c-text-faint:#5b6087;

  --sh-1: 0 1px 2px rgba(0,0,0,.45);
  --sh-2: 0 6px 18px rgba(0,0,0,.4);
  --sh-3: 0 16px 36px rgba(0,0,0,.45);
  --sh-glow: 0 10px 40px rgba(91,108,255, 0.45);
}

/* ─── Reduced motion ─────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    transition-duration: 1ms !important;
  }
}
[data-motion="reduced"] *, [data-motion="reduced"] *::before, [data-motion="reduced"] *::after {
  animation-duration: 1ms !important;
  transition-duration: 1ms !important;
}