:root {
  /* Brand — Meritz Red */
  --color-brand: #ef3b24;
  --color-brand-rgb: 239 59 36;
  --color-brand-hover: #d4331f;
  --color-brand-active: #b82b1a;
  --color-brand-disabled: #f5a59a;
  --color-brand-soft: rgb(var(--color-brand-rgb) / 0.08);
  --color-brand-soft-12: rgb(var(--color-brand-rgb) / 0.12);
  --color-brand-soft-50: #fff7f6;
  --color-brand-soft-100: #fff4f2;
  --color-brand-ring: rgb(var(--color-brand-rgb) / 0.22);
  --color-brand-shadow: rgb(var(--color-brand-rgb) / 0.30);

  /* Text — 회색 계단 (#111/#222/#333/#666/#888/#AAA) */
  --color-text: #111111;
  --color-text-secondary: #222222;
  --color-text-tertiary: #333333;
  --color-text-muted: #666666;
  --color-text-muted-2: #767676;
  --color-text-muted-3: #4A4A4A;
  --color-text-muted-4: #AAA;
  --color-text-subtle: #888888;
  --color-text-placeholder: #767676;
  --color-text-on-brand: #ffffff;

  /* Surfaces */
  --color-surface: #ffffff;
  --color-surface-subtle: #f5f5f5;
  --color-surface-muted: #f0f0f0;
  --color-surface-info: #f5f6f9;
  --color-surface-card-blue: #edf0f6;
  --color-surface-soft-blue: #f7f9fb;
  --color-surface-tonal: #f2f4f8;
  --color-surface-tonal-hover: #e8ecf1;
  --color-surface-warm: #fffefd;
  --color-surface-dark: #222222;

  /* Borders */
  --color-border: #dddddd;
  --color-border-strong: #999999;
  --color-border-focus: #111111;
  --color-border-dark: #222222;
  --color-divider: #eeeeee;
  --color-border-soft: #cccccc;
  --color-border-warm: #f7f1ee;
  --color-btn-outline-stroke: #e1e1e1;
  --color-btn-outline-text: #626262;

  /* Status */
  --color-danger: #ef3b24;
  --color-danger-strong: #d42b2b;
  --color-danger-soft: #fff4f2;
  --color-success: #1a8a4a;
  --color-success-soft: #eaf6ef;
  --color-info: #1a6bc4;
  --color-info-strong: #3e6ae1;
  --color-info-soft: #f5f6f9;
  --color-warning: #ff9a3d;
  --color-warning-soft: #FFFBF0;
  --color-lavender: #5B6CFF;
  --color-lavender-soft: #EEF2FF;
  --color-coral: #FF7A00;
  --color-coral-soft: #FFF1E8;
  --color-excluded: #6B7280;
  --color-excluded-soft: #F3F4F6;

  /* Secondary */
  --color-secondary-mint: #39c0aa;
  --color-secondary-orange: #ff9a3d; /* --color-warning 과 동일 hex */
  --color-secondary-coral: #ff7a66;

  /* Action accents */
  --color-action-mint: var(--color-secondary-mint);
  --color-action-mint-soft: #dff9f2;
  --color-action-orange: var(--color-secondary-orange);
  --color-action-cream: #FFFBF0;

  /* Surface accents */
  --color-card-lavender: #F2F4F8;
  --color-card-sky: #E7F0FF;
  --color-card-cream: #FFF8E6;
  --color-help-cream: #FEF8E6;
  --color-dimmed: rgba(0, 0, 0, 0.6);
  --color-toast-bg: rgba(0, 0, 0, 0.7);

  /* Benefit swiper card backgrounds */
  --color-benefit-card-1: #F1FBF7;
  --color-benefit-card-2: #F4F3FF;
  --color-benefit-card-3: #FFF3F6;
  --color-benefit-card-4: #F3F5FA;
  --color-benefit-card-5: #F4F7FF;
  --color-benefit-card-6: #FFF2F2;
  --color-benefit-card-7: #FFF5EF;
  --color-benefit-card-8: #EEF9F6;
  --color-benefit-card-9: #F2F7FF;
  --color-benefit-card-10: #F4F6FA;

  /* Radius */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-2xl: 24px;
  --radius-pill: 9999px;

  /* Shadow */
  --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 8px 24px rgba(15, 23, 42, 0.08);
  --shadow-dropdown: 0 16px 24px -8px rgba(15, 23, 42, 0.10);
  --shadow-cta: 0 8px 20px var(--color-brand-shadow);
  --shadow-coupon: 4px 4px 4px rgba(225, 225, 225, 0.6);
  --shadow-pop: 0 4px 9px rgba(0, 0, 0, 0.18);

  /* Font */
  --font-sans: Pretendard, -apple-system, BlinkMacSystemFont,
    system-ui, sans-serif;

  /* Type scale */
  --fs-2xs: 11px;
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-14: 14px;
  --fs-15: 15px;
  --fs-base: 16px;
  --fs-md: 18px;
  --fs-lg: 20px;
  --fs-xl: 24px;
  --fs-2xl: 28px;
  --fs-3xl: 32px;
  --fs-4xl: 40px;
  --fs-display: 48px;

  /* Line-height — 모든 fs 토큰에 +4px 페어링 */
  --lh-xs: 14px;      /* 12 + 2 */
  --lh-sm: 17px;      /* 13 + 4 */
  --lh-14: 18px;      /* 14 + 4 */
  --lh-15: 19px;      /* 15 + 4 */
  --lh-base: 20px;    /* 16 + 4 */
  --lh-md: 22px;      /* 18 + 4 */
  --lh-lg: 24px;      /* 20 + 4 */
  --lh-xl: 28px;      /* 24 + 4 */
  --lh-2xl: 32px;     /* 28 + 4 */
  --lh-3xl: 36px;     /* 32 + 4 */
  --lh-4xl: 44px;     /* 40 + 4 */
  --lh-display: 52px; /* 48 + 4 */

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 64px;
  --space-11: 80px;

  /* Form */
  --field-height-sm: 36px;
  --field-height-md: 44px;
  --field-height-lg: 56px;
  --field-pad-x-sm: 12px;
  --field-pad-x-md: 14px;
  --field-pad-x-lg: 16px;
  --field-radius: 8px;
  --field-radius-sm: 8px;
  --field-radius-md: 8px;
  --field-radius-lg: 8px;
  --field-border: 1px;
  --field-focus-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  --field-bg: var(--color-surface);
  --field-bg-disabled: var(--color-surface-subtle);
  --field-border-color: var(--color-border);
  --field-border-hover: var(--color-border-strong);
  --field-border-focus: #1a1a1a;
  --field-border-error: var(--color-danger);
  --field-text: var(--color-text);
  --field-placeholder: var(--color-text-muted-2);

  /* Scrollbar */
  --scrollbar-size: 4px;
  --scrollbar-thumb: #ddd;
  --scrollbar-thumb-hover: var(--scrollbar-thumb);

  /* Container */
  --container-max: 1180px;

  /* Motion */
  --ease-out: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 0.15s;
  --duration: 0.22s;
}