:root {
  --color-brand-primary: #1e5436;
  --color-brand-primary-strong: #133c26;
  --color-brand-primary-soft: #eaf2ed;
  --color-brand-secondary: #6c9f37;
  --color-brand-secondary-soft: #f0f6e9;
  --color-brand-accent: #89bbda;
  --color-background-page: #f7f9f8;
  --color-background-card: #ffffff;
  --color-background-subtle: #f0f4f2;
  --color-background-inverse: #173f2b;
  --color-border-default: #dde4e1;
  --color-border-subtle: #edf1ef;
  --color-text-primary: #27332f;
  --color-text-secondary: #5e6a65;
  --color-text-muted: #7a8580;
  --color-text-inverse: #ffffff;
  --font-family-sans: "Pretendard Variable", Pretendard, "Noto Sans KR", "Malgun Gothic", sans-serif;
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --container-max-width: 80rem;
  --radius-sm: .5rem;
  --radius-md: .625rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-full: 999px;
  --shadow-md: 0 12px 32px rgb(23 59 49 / 10%);
  --shadow-lg: 0 24px 64px rgb(23 59 49 / 16%);
  --duration-normal: 200ms;
  --ease-standard: cubic-bezier(.2, 0, 0, 1);
}

html[data-theme="dark"] {
  color-scheme: dark;
  --color-brand-primary: #72c394;
  --color-brand-primary-strong: #b8e2c9;
  --color-brand-primary-soft: #22382c;
  --color-brand-secondary: #9bc56b;
  --color-brand-secondary-soft: #2a3823;
  --color-brand-accent: #83b9d7;
  --color-background-page: #111714;
  --color-background-card: #1b231f;
  --color-background-subtle: #222c27;
  --color-background-inverse: #0d241b;
  --color-border-default: #3a4740;
  --color-border-subtle: #2c3731;
  --color-text-primary: #eff4f1;
  --color-text-secondary: #c3cec8;
  --color-text-muted: #9daaa3;
  --color-text-inverse: #ffffff;
  --shadow-md: 0 12px 32px rgb(0 0 0 / 28%);
  --shadow-lg: 0 24px 64px rgb(0 0 0 / 38%);
}