:root {
  color-scheme: light;

  /* Color roles */
  --ds-bg: #ffffff;
  --ds-surface: #ffffff;
  --ds-surface-raised: #ffffff;
  --ds-text: #15201d;
  --ds-text-secondary: #59645f;
  --ds-text-tertiary: #66716b;
  --ds-border: #e2e7e4;
  --ds-border-subtle: #edf0ee;
  --ds-accent: #087f5b;
  --ds-accent-pressed: #06664a;
  --ds-accent-soft: #e7f5ef;
  --ds-positive: #087f5b;
  --ds-negative: #c0392b;
  --ds-warning: #9a5a00;
  --ds-disabled: #e5e8e6;
  --ds-disabled-text: #66716b;
  --ds-inverse: #101a16;
  --ds-on-inverse: #ffffff;

  /* 4px spacing grid */
  --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;
  --space-16: 64px;

  /* Korean-first type ramp */
  --font-sans: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;
  --type-display-size: clamp(2rem, 5vw, 2.5rem);
  --type-display-weight: 800;
  --type-display-line: 1.22;
  --type-display-track: -0.045em;
  --type-page-title-size: clamp(1.75rem, 7.2vw, 2rem);
  --type-page-title-weight: 750;
  --type-page-title-line: 1.25;
  --type-page-title-track: -0.04em;
  --type-main-value-size: clamp(2.25rem, 9vw, 2.75rem);
  --type-main-value-weight: 800;
  --type-main-value-line: 1.1;
  --type-main-value-track: -0.055em;
  --type-section-size: 1rem;
  --type-section-weight: 700;
  --type-section-line: 1.4;
  --type-section-track: -0.025em;
  --type-title-size: 1.5rem;
  --type-title-weight: 750;
  --type-title-line: 1.3;
  --type-title-track: -0.035em;
  --type-headline-size: 1.125rem;
  --type-headline-weight: 700;
  --type-headline-line: 1.4;
  --type-headline-track: -0.025em;
  --type-body-size: 1rem;
  --type-body-weight: 400;
  --type-body-line: 1.55;
  --type-body-track: -0.015em;
  --type-body-small-size: 0.875rem;
  --type-option-detail-size: 0.8125rem;
  --type-caption-size: 0.75rem;
  --type-button-size: 1rem;
  --type-button-weight: 700;

  /* Radius and elevation */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-sheet: 24px;
  --radius-full: 999px;
  --radius-control: 14px;
  --radius-panel: 20px;
  --shadow-card: 0 1px 2px rgb(16 26 22 / 4%), 0 8px 24px rgb(16 26 22 / 4%);
  --shadow-focus: 0 0 0 3px rgb(8 127 91 / 20%);

  /* Named layers */
  --z-header: 20;
  --z-cta: 30;
  --z-sheet: 60;
  --z-toast: 80;
  --z-transition: 90;

  /* Shared motion */
  --motion-instant: 100ms;
  --motion-fast: 160ms;
  --motion-normal: 240ms;
  --motion-slow: 360ms;
  --motion-vehicle: 250ms;
  --motion-vehicle-offset: 12px;
  --motion-vehicle-stagger: 15ms;
  --motion-vehicle-title-delay: 80ms;
  --motion-vehicle-title-opacity-duration: 650ms;
  --motion-vehicle-body-delay: 250ms;
  --motion-vehicle-opacity-duration: 900ms;
  --motion-vehicle-opacity-ease: cubic-bezier(.3, 0, .3, 1);
  --motion-vehicle-ease: cubic-bezier(.2, .65, .3, 1);
  --motion-vehicle-opacity-mid: .65;
  --motion-vehicle-opacity-point: .6;
  --motion-page: 200ms;
  --motion-ease: cubic-bezier(.2, .75, .25, 1);
  --motion-spring: cubic-bezier(.2, .85, .25, 1);

  /* Breakpoints: 480 / 768 / 1024 / 1440px (documented; CSS media queries use literals) */
  --layout-mobile-max: 767px;
  --layout-tablet-min: 768px;
  --layout-desktop-min: 1024px;
  --layout-wide-min: 1440px;
}