/* ============================================================
   DAMODIRA 디자인 토큰 — 전역 :root (단일 정의처)
   톤: 뉴트럴 미니멀 (카카오 IR). 모든 컴포넌트는 이 변수만 참조한다.
   ※ Tailwind 4.3 도입 시 이 값들을 @theme 으로 옮기면 됨 (변수명 동일 → 컴포넌트 수정 불필요).
   ============================================================ */

/* Pretendard Variable — 로컬 번들(woff2). 경로는 이 CSS(_content/DAMODIRA.Client.Shared/) 기준 상대 */
@font-face {
    font-family: "Pretendard Variable";
    font-weight: 45 920;
    font-style: normal;
    font-display: swap;
    src: url("fonts/PretendardVariable.woff2") format("woff2-variations");
}

/* 박스 모델 리셋 — width:100% + padding 이 컨테이너를 넘치지 않게 (전역) */
*, *::before, *::after { box-sizing: border-box; }

:root {
    /* 폰트 — 진짜 폰트(Pretendard). Inter 기본값 금지 */
    --font-sans: "Pretendard Variable","Pretendard",system-ui,-apple-system,"Segoe UI",sans-serif;

    /* 주요 액션·활성 = 잉크 블랙 (검은 버튼, 활성 pill) */
    --color-accent: #191f28;
    --color-accent-hover: #333d4b;
    --color-accent-soft: #f2f4f6;

    /* 테마 색 (기본 = 로열 퍼플). Super 각자 설정 시 런타임에 덮어씀(ThemeStyles) */
    --theme-primary: #722ed1;
    --theme-primary-dark: #531dab;
    --theme-primary-darker: #401789;
    --theme-primary-soft: #b68cd3;
    --theme-primary-tint: #f5edff;
    --theme-primary-glow: #722ed133;

    /* 예약 포인트 = 골드. "진짜 강조" 한 군데에만 (거의 안 씀) */
    --color-point: #c8a24a;
    --color-point-soft: #f7f0db;

    /* 텍스트 위계 (진→연, 중요도 순) */
    --color-text-heading: #191f28;
    --color-text-primary: #333d4b;
    --color-text-secondary: #4e5968;
    --color-text-muted: #8b95a1;
    --color-text-faint: #b0b8c1;

    /* 배경·표면 */
    --color-bg: #ffffff;
    --color-surface: #ffffff;
    --color-subtle: #f4f5f6;

    /* 테두리 — 헤어라인 */
    --color-border: #f1f3f5;
    --color-border-strong: #e5e8eb;

    /* 의미색 — 위계와 별개 (상태 표시 전용) */
    --color-success: #15803d;
    --color-warning: #f59e0b;
    --color-danger: #f04452;
    --color-info: #3182f6;

    /* 타이포 스케일 */
    --text-xs: .75rem;
    --text-sm: .875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 2rem;

    /* spacing — 8px 배수만 */
    --space-1: .5rem;
    --space-2: 1rem;
    --space-3: 1.5rem;
    --space-4: 2rem;
    --space-6: 3rem;

    /* 라운드 — 적당히 (pill 남발 X) */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;

    /* 그림자 — 아주 은은하게 */
    --shadow-sm: 0 1px 2px rgba(0,0,0,.04);
    --shadow-md: 0 4px 12px rgba(0,0,0,.06);

    /* 반응형 브레이크포인트 (참고용 — media query 에서 직접 var 사용 불가) */
    --breakpoint-tablet: 1024px;
    --breakpoint-mobile: 700px;
}

/* 기본 바탕 — 폰트/색 일괄 적용 */
html, body {
    margin: 0;
    font-family: var(--font-sans);
    color: var(--color-text-primary);
    background: var(--color-bg);
    word-break: keep-all;
}