/* ============================================================
   WellCare AI — Design Tokens
   Master UI/UX Prompt 스펙 반영본 (2026-08-04)

   Premium Healthcare SaaS — Apple · Linear · Stripe · Vercel · Notion
   Avoid: Bootstrap look · generic admin · heavy borders · cheap shadows
          · over-designed gradients · crowded layouts

   이 파일은 :root 변수만 정의한다. 선택자 규칙을 넣지 말 것.
   ============================================================ */

:root {
  /* ══ Color · Brand ═══════════════════════════════════════ */
  --wc-primary:        #2563EB;
  --wc-primary-light:  #DBEAFE;
  --wc-primary-hover:  #1D4ED8;
  --wc-primary-active: #1E40AF;
  --wc-primary-subtle: #EFF6FF;
  --wc-on-primary:     #FFFFFF;

  /* ══ Color · Semantic ════════════════════════════════════
     지정 색은 채움(배지 점·아이콘·차트)에 쓰고,
     본문 텍스트에는 -text 변형을 쓴다.
     #10B981/#F59E0B 는 흰 배경 대비 2.5:1 로 WCAG AA 미달이라
     텍스트에 그대로 쓰면 접근성 요건이 깨진다.                */
  --wc-success:        #10B981;
  --wc-success-text:   #047857;   /* 4.8:1 AA */
  --wc-success-bg:     #ECFDF5;

  --wc-warning:        #F59E0B;
  --wc-warning-text:   #B45309;   /* 4.6:1 AA */
  --wc-warning-bg:     #FFFBEB;

  --wc-danger:         #EF4444;
  --wc-danger-text:    #B91C1C;   /* 6.0:1 AA */
  --wc-danger-bg:      #FEF2F2;

  --wc-info:           #2563EB;
  --wc-info-text:      #1D4ED8;
  --wc-info-bg:        #EFF6FF;

  /* ══ Color · Neutral ═════════════════════════════════════ */
  --wc-bg:          #F8FAFC;
  --wc-surface:     #FFFFFF;
  --wc-surface-2:   #F1F5F9;
  --wc-text:        #0F172A;
  --wc-text-2:      #475569;
  --wc-text-muted:  #64748B;
  --wc-text-subtle: #94A3B8;
  --wc-border:      #E2E8F0;
  --wc-border-2:    #CBD5E1;

  /* 어두운 섹션 (Contrast band) */
  --wc-ink:         #0B1220;
  --wc-ink-2:       #111C33;
  --wc-on-ink:      #F8FAFC;
  --wc-on-ink-2:    #94A3B8;

  /* ══ Typography ══════════════════════════════════════════ */
  --wc-font: "Pretendard Variable", Pretendard, "Inter", -apple-system,
             BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic",
             "맑은 고딕", system-ui, sans-serif;
  --wc-font-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  /* 본문 16px / 행간 1.7 — 작은 글씨를 쓰지 않는다 */
  --wc-fs-display: 64px;
  --wc-fs-h1:      48px;
  --wc-fs-h2:      36px;
  --wc-fs-h3:      28px;
  --wc-fs-h4:      22px;
  --wc-fs-lead:    20px;
  --wc-fs-body:    16px;
  --wc-fs-sm:      15px;
  --wc-fs-xs:      13px;
  --wc-fs-label:   12px;

  --wc-lh-display: 1.08;
  --wc-lh-head:    1.25;
  --wc-lh-body:    1.7;

  --wc-ls-display: -0.03em;
  --wc-ls-head:    -0.02em;
  --wc-ls-label:    0.08em;

  --wc-fw-regular: 400;
  --wc-fw-medium:  500;
  --wc-fw-semi:    600;
  --wc-fw-bold:    700;
  --wc-fw-black:   800;

  /* ══ Spacing · 8-point system ════════════════════════════ */
  --wc-1:   4px;
  --wc-2:   8px;
  --wc-3:  12px;
  --wc-4:  16px;
  --wc-5:  24px;
  --wc-6:  32px;
  --wc-7:  40px;
  --wc-8:  48px;
  --wc-9:  64px;
  --wc-10: 80px;
  --wc-11: 96px;
  --wc-12: 128px;

  /* ══ Layout ══════════════════════════════════════════════ */
  --wc-container: 1280px;
  --wc-prose:     68ch;
  --wc-gutter:    32px;
  --wc-gutter-sm: 20px;
  --wc-header-h:  72px;

  /* ══ Radius — 카드 24px, 버튼은 과하게 둥글리지 않는다 ═══ */
  --wc-r-sm:   8px;
  --wc-r-md:  12px;   /* 버튼·입력 */
  --wc-r-lg:  16px;
  --wc-r-xl:  24px;   /* 카드 */
  --wc-r-2xl: 32px;   /* 대형 패널 */
  --wc-r-full: 9999px;

  /* ══ Shadow — soft only. 진한 그림자를 쓰지 않는다 ═══════ */
  --wc-sh-xs: 0 1px 2px rgba(15, 23, 42, .04);
  --wc-sh-sm: 0 1px 3px rgba(15, 23, 42, .05), 0 1px 2px rgba(15, 23, 42, .03);
  --wc-sh-md: 0 4px 16px rgba(15, 23, 42, .06), 0 1px 3px rgba(15, 23, 42, .04);
  --wc-sh-lg: 0 12px 32px rgba(15, 23, 42, .08), 0 2px 8px rgba(15, 23, 42, .04);
  --wc-sh-xl: 0 24px 64px rgba(15, 23, 42, .10), 0 4px 12px rgba(15, 23, 42, .05);
  --wc-sh-primary: 0 8px 24px rgba(37, 99, 235, .18);

  /* ══ Motion — 차분하게. 화려한 연출 금지 ═════════════════ */
  --wc-t-fast: 150ms;
  --wc-t-base: 240ms;
  --wc-t-slow: 400ms;
  --wc-ease:      cubic-bezier(.4, 0, .2, 1);
  --wc-ease-out:  cubic-bezier(.16, 1, .3, 1);

  /* ══ Focus ═══════════════════════════════════════════════ */
  --wc-ring: 0 0 0 3px rgba(37, 99, 235, .35);

  /* ══ Layer ═══════════════════════════════════════════════
     레거시 z-index 대역(모달 1000 / custom-modal 2000)을 피한다 */
  --wc-z-header:   500;
  --wc-z-dropdown: 600;
  --wc-z-float:    150;
}

@media (max-width: 900px) {
  :root {
    --wc-fs-display: 40px;
    --wc-fs-h1:      34px;
    --wc-fs-h2:      28px;
    --wc-fs-h3:      22px;
    --wc-fs-lead:    18px;
    --wc-gutter:     20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root { --wc-t-fast: 0ms; --wc-t-base: 0ms; --wc-t-slow: 0ms; }
}