/* 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 — Minimal, calm palette. See docs/07-ui-design-system.md. */
  --color-primary: #6366F1;        /* single restrained accent (indigo) */
  --color-primary-hover: #4F52D6;
  --color-bg: #FFFFFF;
  --color-surface: #F7F7F8;         /* light neutral gray */
  --color-text: #1F2430;
  --color-text-muted: #6B7280;
  --color-success: #16A34A;
  --color-warning: #D97706;
  --color-danger: #DC2626;
  --color-border: #E7E7EA;

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

  /* Shadow — very subtle (minimal) */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .05);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, .06);

  /* 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: #17151F;
  --color-surface: #201C2E;
  --color-text: #EDEAF7;
  --color-text-muted: #9E99AE;
  --color-border: #322C44;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, .3);
  --shadow-md: 0 6px 20px rgba(0, 0, 0, .4);
}

* {
  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;
  }
}