/*
 * LOCALMATE design tokens — the single source for brand values.
 * Every page loads this file first. Other stylesheets reference these with a
 * fallback, e.g. var(--lm-blue, #0077b3), so a page that misses this file
 * still renders correctly. Documented in docs/design-system.md.
 */
:root {
  /* Brand */
  --lm-blue: #0077b3;          /* primary · 4.9:1 on white, safe for text */
  --lm-blue-bright: #008dcc;   /* accents and large shapes only · 3.7:1, not for body text */
  --lm-blue-hover: #006b9c;    /* hover/pressed state of primary */
  --lm-blue-soft: #eef8fd;     /* tinted backgrounds */

  /* Neutrals */
  --lm-ink: #1a2730;           /* headings and body text */
  --lm-ink-strong: #16191d;    /* text on light form fields */
  --lm-muted: #52636e;         /* secondary text · 6.2:1 on white */
  --lm-line: #dce5e9;          /* dividers and borders */
  --lm-surface: #edf3f4;       /* light section background */
  --lm-white: #ffffff;
  --lm-black: #000000;
  --lm-danger: #c62828;

  /* Typography */
  --lm-font: 'pretendard variable', Pretendard, -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  --lm-text-xs: 0.75rem;                                   /* 12px — legal, captions */
  --lm-text-sm: 0.875rem;                                  /* 14px */
  --lm-text-md: 1rem;                                      /* 16px — body */
  --lm-text-lg: clamp(1.125rem, 0.95rem + 0.5vw, 1.375rem);
  --lm-text-xl: clamp(1.375rem, 1.05rem + 1vw, 2rem);
  --lm-text-2xl: clamp(1.75rem, 1.2rem + 1.8vw, 3rem);
  --lm-text-3xl: clamp(2.25rem, 1.3rem + 3.2vw, 4.5rem);
  --lm-text-display: clamp(3rem, 1.4rem + 5.5vw, 7.5rem);

  /* Spacing (4px base) */
  --lm-space-1: 4px;
  --lm-space-2: 8px;
  --lm-space-3: 12px;
  --lm-space-4: 16px;
  --lm-space-5: 24px;
  --lm-space-6: 32px;
  --lm-space-7: 48px;
  --lm-space-8: 64px;

  /* Shape */
  --lm-radius-sm: 4px;
  --lm-radius: 8px;
  --lm-radius-lg: 20px;
  --lm-radius-pill: 999px;

  /* Layers */
  --lm-z-base: 1;
  --lm-z-sticky: 100;
  --lm-z-overlay: 1000;
  --lm-z-modal: 10000;
  --lm-z-toast: 100000;

  /* Motion */
  --lm-ease: cubic-bezier(.2, .7, .2, 1);
  --lm-duration: 200ms;

  /* Focus */
  --lm-focus-ring: 2px solid var(--lm-blue);
  --lm-focus-offset: 3px;

  /* Breakpoints (reference only — CSS variables cannot be used in @media) */
  /* mobile < 600px · tablet 600–1023px · desktop ≥ 1024px */
}