/* ============================================
   CYL CLINIC v2.0 — Design Tokens
   All CSS custom properties (variables)
   ============================================ */
:root {
  /* Color — Brand */
  --color-bg:        #FFFFFF;
  --color-bg-warm:   #FAF8F4;
  --color-bg-soft:   #F5EFE6;
  --color-surface:   #FFFFFF;
  --color-line:      #E8E2D5;
  --color-line-soft: #F0EAE0;

  --color-gold:      #C9A961;
  --color-gold-dk:   #A88A45;
  --color-gold-lt:   #E5D5A8;

  --color-ink:       #1A1A1A;
  --color-ink-soft:  #3A3633;
  --color-muted:     #6B665E;
  --color-muted-2:   #9A9388;

  --color-success:   #2F855A;
  --color-warning:   #B7791F;
  --color-danger:    #C53030;
  --color-info:      #2C5282;

  /* Typography */
  --font-serif: 'Cormorant Garamond', 'Noto Serif KR', 'Noto Serif SC', Georgia, serif;
  --font-sans:  'Inter', 'Pretendard', 'Be Vietnam Pro', 'Noto Sans SC', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --fs-xs:   clamp(0.72rem, 0.7rem + 0.1vw, 0.78rem);
  --fs-sm:   clamp(0.84rem, 0.8rem + 0.2vw, 0.92rem);
  --fs-base: clamp(0.95rem, 0.9rem + 0.25vw, 1.05rem);
  --fs-lg:   clamp(1.1rem, 1rem + 0.4vw, 1.25rem);
  --fs-xl:   clamp(1.4rem, 1.2rem + 0.7vw, 1.7rem);
  --fs-2xl:  clamp(1.8rem, 1.5rem + 1vw, 2.4rem);
  --fs-3xl:  clamp(2.4rem, 1.9rem + 2vw, 3.5rem);
  --fs-4xl:  clamp(3rem, 2.3rem + 3vw, 4.5rem);

  /* Spacing 4-base */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;  --sp-3: 0.75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;   --sp-6: 2rem;    --sp-7: 3rem;     --sp-8: 4rem;
  --sp-9: 6rem;     --sp-10: 8rem;

  /* Layout */
  --container: 1200px;
  --container-narrow: 880px;
  --radius-sm: 4px;
  --radius:    8px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* Elevation */
  --shadow-sm: 0 1px 2px rgba(26,26,26,0.04), 0 1px 3px rgba(26,26,26,0.06);
  --shadow:    0 4px 12px rgba(26,26,26,0.06), 0 2px 4px rgba(26,26,26,0.04);
  --shadow-lg: 0 12px 32px rgba(26,26,26,0.10), 0 4px 8px rgba(26,26,26,0.06);
  --shadow-gold: 0 8px 24px rgba(201,169,97,0.18);

  /* Motion */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.0, 0, 0.2, 1);
  --t-fast: 160ms;
  --t-base: 240ms;
  --t-slow: 480ms;

  /* Layout heights */
  --header-h: 72px;
}

@media (min-width: 1025px) { :root { --header-h: 88px; } }