/**
 * 🎨 hospice-web-pwa / design-tokens.css
 * 호스피스 전사 단일 디자인 시스템 토큰 (SSOT)
 * REQ-07 브랜딩 및 REQ-09 네비게이션 절대 표준 준수
 */

:root {
  /* 🌿 1. 공식 4대 컬러 매너 (Primary #3E6553, Secondary #D97757, Tertiary #D4A359, Neutral #FDFBF7) */
  --color-primary: #3E6553;       /* 메인 프라이머리 포레스트 세이지 */
  --color-primary-deep: #1E362A;  /* 고대비 텍스트 */
  --color-primary-dark: #2C4C3E;  /* 버튼 호버 / 강조 */
  --color-primary-light: #628B77; /* 서브 하이라이트 */
  --color-primary-pale: #E2ECE6;  /* 부드러운 틴트 뱃지 */

  --color-secondary: #D97757;     /* 세컨더리 테라코타 코랄 (입원형/가족 온기) */
  --color-secondary-dark: #A94C2F;/* 세컨더리 딥 */
  --color-secondary-pale: #FDF1EC;/* 세컨더리 소프트 틴트 배경 */

  --color-tertiary: #D4A359;      /* 터셔리 웜 골드 / 앰버 (타이머 / 주의) */
  --color-tertiary-dark: #9E7027; /* 터셔리 딥 */
  --color-tertiary-pale: #FCF6EA; /* 터셔리 소프트 틴트 배경 */

  /* 기존 변수 하위 호환 매핑 */
  --sage-deep: var(--color-primary-deep);
  --sage-dark: var(--color-primary-dark);
  --sage-primary: var(--color-primary);
  --sage-light: var(--color-primary-light);
  --sage-pale: var(--color-primary-pale);
  --sage-bg: #EAF1ED;

  --amber-warm: var(--color-tertiary);
  --amber-bg: var(--color-tertiary-pale);
  --red-urgent: #dc2626;
  --red-bg: #fee2e2;

  /* 🤍 2. 뉴트럴 안심 배경 및 텍스트 (Neutral #FDFBF7) */
  --bg-app: #FDFBF7;              /* 공식 뉴트럴 크림 미색 배경 */
  --bg-surface: #ffffff;          /* 순백색 카드 서페이스 */
  --text-primary: #18231E;        /* 가독성 1순위 다크 그레이 */
  --text-secondary: #3D4A43;      /* 보조 설명 텍스트 */
  --border-light: transparent;    /* 보더리스(Borderless) 프리미엄 서페이스 */
  --border-focus: var(--color-primary); /* 포커스 링 */

  /* 📱 4. 모바일 레이아웃 및 터치 규격 (300줄 모듈화 & 접근성) */
  --header-height: 56px;        /* 상단 고정 헤더 높이 */
  --nav-height: 60px;           /* 하단 고정 GNB 높이 */
  --app-max-width: 440px;       /* 모바일 최적화 컨테이너 너비 */
  --touch-target-normal: 48px;  /* 일반 모바일 최소 터치 타깃 */
  --touch-target-large: 64px;   /* 환우 모드 손떨림/시니어 터치 타깃 (64dp) */

  /* 🔤 5. 폰트 스케일러 및 반응형 타이포그래피 (Headline: Plus Jakarta Sans / Body & Label: Inter / 한글: Pretendard) */
  --font-scale: 1.0;
  --font-headline: 'Plus Jakarta Sans', 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-body: 'Inter', 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-label: 'Inter', 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-main: var(--font-body);
  --font-size-xs: calc(11px * var(--font-scale));
  --font-size-sm: calc(12px * var(--font-scale));
  --font-size-base: calc(14px * var(--font-scale));
  --font-size-md: calc(16px * var(--font-scale));
  --font-size-lg: calc(18px * var(--font-scale));
  --font-size-xl: calc(20px * var(--font-scale));
  --font-size-2xl: calc(24px * var(--font-scale));
  --font-size-3xl: calc(28px * var(--font-scale));

  /* 📐 6. 모던 헬스케어 둥근 라디우스 (전기차기름차/나만의닥터) */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-card: 20px;
  --radius-btn: 14px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* 🌫️ 7. 멀티레이어 소프트 입체 섀도우 (눈부심 방지 & 편안한 깊이감) */
  --shadow-header: 0 1px 3px rgba(0, 0, 0, 0.05);
  --shadow-nav: 0 -2px 8px rgba(0, 0, 0, 0.04);
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.03), 0 8px 20px -4px rgba(15, 23, 42, 0.05);
  --shadow-card-hover: 0 4px 6px -1px rgba(0, 0, 0, 0.04), 0 12px 28px -6px rgba(15, 23, 42, 0.08);
  --shadow-elevated: 0 10px 25px -5px rgba(45, 106, 79, 0.15);
  --shadow-modal: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

  /* 🎨 8. 슬레이트 틴트 뉴트럴 팔레트 */
  --slate-50: #f8fafc;
  --slate-100: #f1f5f9;
  --slate-200: #e2e8f0;
  --slate-400: #94a3b8;
  --slate-500: #64748b;
  --slate-700: #334155;
}

/* 🧓 시니어 140% 큰글씨 환우 모드 변수 오버라이드 */
body.mode-patient {
  --text-primary: #000000;      /* 100% 완전 칠흑색 */
  --bg-app: #f4f6f0;            /* 눈 피로도 최소화 고대비 미색 */
  --touch-target-normal: 64px;  /* 모든 터치 64dp 강제 상향 */
}