/* CMSLAB public project site tokens — refined clinical skincare, 2026-10-21.
   #AF272F is verified from Cell Fusion C's official deployed website CSS.
   Document it as an official-web usage value, not a certified corporate CI value. */
:root {
  color-scheme: light;

  --site-white: #ffffff;
  --site-gray-25: #fbfbfa;
  --site-gray-50: #f6f6f4;
  --site-gray-100: #ececea;
  --site-gray-200: #d9d9d5;
  --site-gray-300: #c1c1bc;
  --site-gray-500: #7c7c76;
  --site-gray-600: #64645f;
  --site-gray-700: #3e3e3a;
  --site-gray-900: #1b1b19;

  --site-surface: var(--site-white);
  --site-surface-subtle: var(--site-gray-50);
  --site-surface-muted: var(--site-gray-100);
  --site-border: var(--site-gray-200);
  --site-border-strong: var(--site-gray-300);
  --site-text: var(--site-gray-900);
  --site-text-muted: var(--site-gray-600);
  --site-text-subtle: var(--site-gray-500);

  --site-accent: #af272f;
  --site-accent-hover: #941f27;
  --site-accent-tint: #f8eaeb;
  --site-accent-tint-subtle: #fcf5f5;
  --site-on-accent: #ffffff;
  --site-focus-ring: #af272f;

  --site-font-sans: "Pretendard", "Noto Sans KR", "Apple SD Gothic Neo", sans-serif;
  --site-font-weight-regular: 400;
  --site-font-weight-strong: 700;
  --site-font-size-caption: 0.8125rem;
  --site-font-size-label: 0.875rem;
  --site-font-size-body-compact: 0.9375rem;
  --site-font-size-body: 1rem;
  --site-font-size-section: 1.75rem;
  --site-font-size-section-lg: 2rem;
  --site-font-size-title: 2.5rem;
  --site-font-size-title-lg: 3rem;
  --site-line-height-tight: 1.16;
  --site-line-height-heading: 1.25;
  --site-line-height-body: 1.65;

  --site-space-1: 0.25rem;
  --site-space-2: 0.5rem;
  --site-space-3: 0.75rem;
  --site-space-4: 1rem;
  --site-space-6: 1.5rem;
  --site-space-8: 2rem;
  --site-space-12: 3rem;
  --site-space-16: 4rem;
  --site-space-20: 5rem;

  --site-radius-sm: 0.125rem;
  --site-radius-md: 0.25rem;
  --site-radius-lg: 0.5rem;
  --site-border-width: 1px;
  --site-control-height-compact: 2.5rem;
  --site-control-height: 2.75rem;
  --site-touch-height-compact: 2.5rem;
  --site-touch-height: 2.75rem;

  --site-reading-max: 45rem;
  --site-content-max: 78rem;
  --site-content-wide: 90rem;
  --site-page-gutter: 4rem;
  --site-page-gutter-laptop: 3rem;
  --site-page-gutter-tablet: 2rem;
  --site-page-gutter-mobile: 1.25rem;
  --site-section-gap: 5rem;
  --site-section-gap-tablet: 4rem;
  --site-section-gap-mobile: 3rem;

  --site-transition: 180ms ease;
  --site-overlay-shadow: 0 12px 32px rgb(27 27 25 / 8%);

  --site-state-complete-marker: var(--site-gray-700);
  --site-state-progress-marker: var(--site-accent);
  --site-state-blocked-marker: var(--site-gray-500);
  --site-state-planned-marker: var(--site-gray-300);
}

:where(html, body) {
  background: var(--site-surface);
  color: var(--site-text);
  font-family: var(--site-font-sans);
  font-size: 100%;
  font-weight: var(--site-font-weight-regular);
  font-synthesis: none;
}

:where(h1, h2, h3, h4, h5, h6, strong, b, button) {
  font-weight: var(--site-font-weight-strong);
}

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--site-focus-ring);
  outline-offset: 3px;
}

@media (max-width: 1279px) {
  :root {
    --site-page-gutter: var(--site-page-gutter-laptop);
  }
}

@media (max-width: 1023px) {
  :root {
    --site-page-gutter: var(--site-page-gutter-tablet);
    --site-section-gap: var(--site-section-gap-tablet);
  }
}

@media (max-width: 767px) {
  :root {
    --site-font-size-section: 1.5rem;
    --site-font-size-section-lg: 1.75rem;
    --site-font-size-title: 2rem;
    --site-font-size-title-lg: 2.25rem;
    --site-page-gutter: var(--site-page-gutter-mobile);
    --site-section-gap: var(--site-section-gap-mobile);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --site-transition: 0ms;
  }
}

@media print {
  :root {
    --site-page-gutter: 0;
    --site-section-gap: 2rem;
    --site-overlay-shadow: none;
  }
}