/* MoveCar design tokens — see /DESIGN.md sections 2-4, 6-7. Do not add a raw color/size outside this file. */
:root {
  color-scheme: light;

  --surface-primary: #ffffff;
  --surface-secondary: #f6f6f7;
  --surface-sunken: #f0f0f1;
  --text-primary: #1f2124;
  --text-secondary: #6b6f76;
  --text-tertiary: #9aa0a6;
  --text-on-accent: #ffffff;
  --border-default: rgba(31, 33, 36, 0.1);
  --border-subtle: rgba(31, 33, 36, 0.06);
  --accent-primary: #2f6fed;
  --accent-hover: #2558c2;
  --accent-pressed: #1e4699;
  --accent-subtle-bg: #eaf1fe;
  --status-success: #1e8e5a;
  --status-success-bg: #e7f5ee;
  --status-warning: #945e18;
  --status-warning-bg: #fbf1e0;
  --status-error: #c0342c;
  --status-error-bg: #fbeae9;
  --status-offline: #6b6f76;
  --status-offline-bg: #eeeeef;
  --focus-ring: #2f6fed;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  --shadow-level-1:
    0 0 0 1px var(--border-subtle), 0 1px 2px rgba(15, 15, 20, 0.04), 0 4px 8px rgba(15, 15, 20, 0.04);
  --shadow-level-2: 0 0 0 1px var(--border-subtle), 0 8px 24px rgba(15, 15, 20, 0.12);

  --font-family:
    -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", Roboto, sans-serif;

  --text-display-size: clamp(24px, 6vw, 28px);
  --text-h1-size: 22px;
  --text-h2-size: 18px;
  --text-body-lg-size: 17px;
  --text-body-size: 15px;
  --text-body-sm-size: 14px;
  --text-caption-size: 13px;
  --text-button-size: 16px;

  --duration-micro: 120ms;
  --duration-standard: 200ms;
  --duration-emphasis: 400ms;
  --ease-out: ease-out;
  --ease-in-out: ease-in-out;
  --ease-emphasis: cubic-bezier(0.16, 1, 0.3, 1);

  --bp-sm: 640px;
  --bp-lg: 1024px;
  --content-max-width: 560px;
  --page-gutter: var(--space-4);
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    --surface-primary: #17181a;
    --surface-secondary: #101113;
    --surface-sunken: #0b0c0d;
    --text-primary: #f3f4f5;
    --text-secondary: #a7acb3;
    --text-tertiary: #6d7278;
    --text-on-accent: #0b1220;
    --border-default: rgba(255, 255, 255, 0.12);
    --border-subtle: rgba(255, 255, 255, 0.07);
    --accent-primary: #5b8df7;
    --accent-hover: #7ba3fa;
    --accent-pressed: #4676da;
    --accent-subtle-bg: rgba(91, 141, 247, 0.16);
    --status-success: #3fcb86;
    --status-success-bg: rgba(63, 203, 134, 0.14);
    --status-warning: #e0a63a;
    --status-warning-bg: rgba(224, 166, 58, 0.14);
    --status-error: #e5645c;
    --status-error-bg: rgba(229, 100, 92, 0.14);
    --status-offline: #a7acb3;
    --status-offline-bg: rgba(167, 172, 179, 0.14);
    --focus-ring: #7ba3fa;
  }
}

@media (min-width: 640px) {
  :root {
    --page-gutter: var(--space-6);
  }
}

@media (min-width: 1024px) {
  :root {
    --page-gutter: var(--space-8);
  }
}