/* Design tokens + base. Apple-inspired, blue theme, dark/light. See docs/07. */

:root {
  --color-primary: #0a84ff;
  --color-primary-soft: rgba(10, 132, 255, 0.12);
  --color-bg: #ffffff;
  --color-surface: #f5f5f7;
  --color-text: #1d1d1f;
  --color-text-muted: #6e6e73;
  --color-border: #d2d2d7;
  --color-danger: #ff453a;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --shadow-soft: 0 4px 16px rgba(0, 0, 0, 0.08);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Noto Sans Thai", "Segoe UI", sans-serif;
  --transition: 200ms ease;
}

[data-theme="dark"] {
  --color-bg: #000000;
  --color-surface: #1c1c1e;
  --color-text: #f5f5f7;
  --color-text-muted: #98989d;
  --color-border: #38383a;
  --color-primary-soft: rgba(10, 132, 255, 0.22);
  --shadow-soft: 0 4px 16px rgba(0, 0, 0, 0.4);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--color-bg);
  color: var(--color-text);
  transition: background var(--transition), color var(--transition);
}

.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.app-main { padding: var(--space-4); max-width: 640px; margin: 0 auto; }

.card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  padding: var(--space-4);
  margin-bottom: var(--space-3);
}

.card__label { color: var(--color-text-muted); font-size: 0.9rem; margin: 0 0 var(--space-1); }
.card__value { font-size: 2.4rem; font-weight: 700; margin: 0; }

.field { display: flex; flex-direction: column; gap: var(--space-1); margin-bottom: var(--space-3); }
.field label { font-size: 0.9rem; color: var(--color-text-muted); }
.field input, .field select {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: 1rem;
}

.btn {
  border: none;
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-4);
  font-size: 1rem;
  cursor: pointer;
  transition: filter var(--transition);
}
.btn:hover { filter: brightness(1.05); }
.btn:focus-visible { outline: 3px solid var(--color-primary-soft); outline-offset: 2px; }
.btn--primary { background: var(--color-primary); color: #fff; }
.btn--ghost { background: transparent; color: var(--color-primary); }

.nav { display: flex; gap: var(--space-2); }
.flag { color: var(--color-danger); font-size: 0.9rem; margin-top: var(--space-2); }
.muted { color: var(--color-text-muted); }