/* BADNITY design tokens — single source of truth for color, spacing, type.
   Components must use these variables, never hardcoded values. See docs/07-ui-design-system.md. */

:root {
  /* Color — Blue theme (light) */
  --color-primary: #0A84FF;
  --color-primary-hover: #0060DF;
  --color-bg: #FFFFFF;
  --color-surface: #F5F5F7;
  --color-text: #1D1D1F;
  --color-text-muted: #6E6E73;
  --color-success: #34C759;
  --color-warning: #FF9F0A;
  --color-danger: #FF3B30;
  --color-border: #E5E5EA;

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;

  /* Soft shadow */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, .08);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, .10);

  /* Spacing scale (4px base) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;

  /* Typography */
  --font-sans: -apple-system, "SF Pro", "Inter", "Noto Sans Thai", system-ui, sans-serif;
  --fs-caption: 13px;
  --fs-body: 15px;
  --fs-title: 20px;
  --fs-h1: 28px;
}

[data-theme="dark"] {
  --color-bg: #000000;
  --color-surface: #1C1C1E;
  --color-text: #F5F5F7;
  --color-text-muted: #98989D;
  --color-border: #38383A;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  color: var(--color-text);
  background: var(--color-bg);
  transition: background-color .2s ease-out, color .2s ease-out;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}