/* ============================================================
   IaC Gen Design System — KT 브랜드 토큰 (8 Gray : 2 Accent)
   Core Theme: Professionalism, Minimalism, Modernity
   ============================================================ */

/* KT Flow 브랜드 폰트 — 헤딩·브랜드 한정(본문은 Pretendard).
   폰트 바이너리(woff2)는 git 미추적(.gitignore) → 없으면 font-display:swap으로 Pretendard 폴백 */
@font-face { font-family: 'KT Flow'; font-weight: 100; font-display: swap; src: url('../fonts/ktflow/KTFlow-Thin.woff2') format('woff2'); }
@font-face { font-family: 'KT Flow'; font-weight: 500; font-display: swap; src: url('../fonts/ktflow/KTFlow-Medium.woff2') format('woff2'); }
@font-face { font-family: 'KT Flow'; font-weight: 700; font-display: swap; src: url('../fonts/ktflow/KTFlow-Bold.woff2') format('woff2'); }
@font-face { font-family: 'KT Flow'; font-weight: 900; font-display: swap; src: url('../fonts/ktflow/KTFlow-Black.woff2') format('woff2'); }

:root {
    /* ── KT Brand Colors ────────────────────────────────────── */
    --kt-red-400: #e54d53;
    --kt-red-500: #e0282f;
    --kt-teal-400: #00b1a8;
    --kt-teal-500: #007f7f;
    --brand-primary: var(--kt-red-500);      /* KT Red — 액센트(.btn-accent·링크·active·focus) */
    --brand-primary-hover: #b81f25;
    --brand-secondary: #24292e;              /* 다크 — 주 CTA(.btn-primary) */
    --brand-secondary-hover: #1b1f23;
    --white: #ffffff;

    /* ── KT Gray Scale (공식 12단계, P1 정렬) ────────────────── */
    --gray-0: #ffffff;
    --gray-1000: #141414;

    /* Surface Colors — 기존 네이밍 유지, raw 값을 KT 스케일에 정렬 */
    --gray-25: #ffffff;   /* 최밝은 배경 (KT gray-0) */
    --gray-50: #f5f5f5;   /* KT gray-50 — 보조 배경 */
    --gray-75: #ebebeb;   /* KT gray-100 — 옅은 라인/배경 */
    --gray-100: #d9d9d9;  /* KT gray-200 — 기본 border */
    --gray-200: #bfbfbf;  /* KT gray-300 — 강한 border / placeholder */
    --gray-300: #919191;  /* KT gray-400 — disabled / placeholder */
    --gray-400: #757575;  /* KT gray-500 — 본문/헬퍼 텍스트 */
    --gray-500: #595959;  /* KT gray-600 — secondary 텍스트 */
    --gray-600: #404040;  /* KT gray-700 — 레이블 텍스트 */
    --gray-700: #1a1a1a;  /* KT gray-900 — 타이틀 텍스트 */
    
    /* Dark Surface Tokens */
    --gray-dark-900: #191a1b;
    --gray-dark-850: #232529;
    --gray-dark-800: #2a2c30;
    --gray-dark-700: #404449;
    --gray-dark-550: #6a6f77;
    --gray-dark-400: #b0b5bb;
    --gray-dark-200: #e1e4e7;

    /* Semantic Mappings (Light Mode - Default) */
    --bg-body: var(--gray-25);
    --bg-sidebar: var(--white);
    --bg-card: var(--white);
    --bg-card-hover: var(--gray-25);
    --bg-input: var(--gray-25);
    --bg-overlay: rgba(36, 41, 46, 0.4);
    --bg-page-header: var(--white);

    --text-primary: var(--brand-secondary);
    --text-secondary: var(--gray-500);
    --text-muted: #5e5e5e;   /* 흰 배경 대비 6.48:1 (구 #757575 4.61:1 — 소형 라벨 가독성 상향, WCAG AA 본문 충족) */
    --text-inverse: var(--white);
    --text-on-dark: var(--gray-200);

    --color-primary: var(--brand-primary);
    --color-primary-hover: var(--brand-primary-hover);
    --color-primary-light: rgba(224, 40, 47, 0.08);
    --color-secondary: var(--brand-secondary);
    --color-secondary-hover: #000000;

    /* Feedback — KT 의미 고정 (uxrule §3): success=완료, warning=확인 필요, error=차단(KT Red 계열·액센트와 아이콘/맥락 구분), info=Teal */
    --color-success: #107c10;   /* 정상 완료·검증 통과 (대비 5.37:1) */
    --color-warning: #b45309;   /* 배포 전 확인·비용/제약 주의 (대비 5.02:1, 텍스트 가독) */
    --color-error: #c0202a;     /* 차단 오류 — KT Red 패밀리 진한 톤(대비 6.03:1), 액센트 #e0282f와 구분 */
    --color-info: var(--kt-teal-500);   /* 안내·진행 — KT Teal (대비 4.84:1) */
    --color-plan: #0067c0;      /* Plan·진행도(파랑) 텍스트 — 흰 배경 5.67:1 (구 인라인 #3b82f6 3.68:1 미달 대체) */
    --color-share: #4f46e5;     /* 공유 배지(인디고) 텍스트 — 흰 배경 6.29:1 (구 #818cf8 2.98:1 대체) */
    --color-state-reset: #be185d; /* State 강제 초기화(핑크) 텍스트 — 흰 배경 6.04:1 (구 #ec4899 3.53:1 대체) */

    --border-color: var(--gray-100);
    --border-strong: var(--gray-200);
    --border-focus: var(--brand-primary);

    /* ── Elevation ─────────────────────────────────────────── */
    --shadow-sm: 0px 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-md: 0px 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0px 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-glow: 0 0 15px rgba(224, 40, 47, 0.18);

    /* ── Spacing (KT 4pt — 기존 의미 토큰 유지 + 누락 단계 px 토큰 보강) ── */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 40px;
    --spacing-2xl: 64px;
    /* KT 4pt full scale (P3 누락 단계 보강): 2·4·8·12·16·20·24·32·40·48·56·64·80 */
    --space-2: 2px;
    --space-4: 4px;
    --space-8: 8px;
    --space-12: 12px;
    --space-16: 16px;
    --space-20: 20px;
    --space-24: 24px;
    --space-32: 32px;
    --space-40: 40px;
    --space-48: 48px;
    --space-56: 56px;
    --space-64: 64px;
    --space-80: 80px;

    /* ── Border Radius ─────────────────────────────────────── */
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-circle: 9999px;

    /* ── Typography ────────────────────────────────────────── */
    --font-primary: 'Pretendard Variable', 'Pretendard', system-ui, -apple-system, sans-serif;
    --font-heading: 'KT Flow', 'Pretendard Variable', 'Pretendard', sans-serif;
    --font-mono: 'Cascadia Code', 'JetBrains Mono', monospace;

    --font-size-xs: 12px;
    --font-size-sm: 13px;
    --font-size-md: 16px;
    --font-size-lg: 18px;
    --font-size-xl: 24px;
    --font-size-2xl: 32px;
    --font-size-h3: 22px;

    /* ── KT Type Scale (P2 — Display~Caption) ──────────────── */
    --fs-display-1: 40px;   --lh-display-1: 1.30;
    --fs-display-2: 36px;   --lh-display-2: 1.48;
    --fs-heading-1: 32px;
    --fs-heading-2: 24px;
    --fs-heading-3: 22px;
    --fs-title-1: 20px;
    --fs-title-2: 18px;
    --fs-title-3: 16px;
    --fs-body-1: 16px;
    --fs-body-2: 15px;
    --fs-body-3: 14px;
    --fs-label-1: 17px;
    --fs-label-2: 15px;
    --fs-label-3: 13px;
    --fs-caption: 12px;

    /* ── Line Height (KT: 단문 148% / 장문 170%) ────────────── */
    --lh-tight: 1.30;     /* Display1 등 큰 헤딩 */
    --lh-short: 1.48;     /* 헤딩·타이틀·단문 본문 */
    --lh-long: 1.70;      /* 장문 본문·문단 */

    /* ── Layout ────────────────────────────────────────────── */
    --sidebar-width: 260px;
    --topbar-height: 72px;

    /* ── Transition ────────────────────────────────────────── */
    --transition-fast: 200ms cubic-bezier(0.16, 1, 0.3, 1);
    --transition-mid: 400ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── Prototype Dark Mode ────────────────────────────────── */
[data-theme="dark"] {
    --bg-body: var(--gray-dark-900);
    --bg-sidebar: var(--gray-dark-900);
    --bg-card: var(--gray-dark-850);
    --bg-card-hover: var(--gray-dark-800);
    --bg-input: var(--gray-dark-900);
    --bg-overlay: rgba(0, 0, 0, 0.8);
    --bg-page-header: var(--gray-dark-850);

    --text-primary: var(--white);      
    --text-secondary: var(--gray-dark-200);
    --text-muted: var(--gray-dark-400);
    --text-inverse: var(--brand-secondary);

    --border-color: var(--gray-dark-700);
    --border-strong: var(--gray-dark-550);
    --border-focus: var(--brand-primary);

    /* 다크 표면(카드 #232529)에서 의미색 텍스트가 충분히 밝도록 상향 — 라이트 토큰은 어두워 다크에서 가독 저하 */
    --color-success: #34d399;   /* 카드 대비 7.98:1 */
    --color-warning: #fbbf24;   /* 카드 대비 9.19:1 */
    --color-error: #f87171;     /* 카드 대비 5.55:1 */
    --color-info: #2dd4bf;      /* 카드 대비 8.25:1 (KT Teal 밝은 톤) */
    --color-plan: #60a5fa;      /* 카드 대비 6.04:1 */
    --color-share: #a5b4fc;     /* 카드 대비 7.70:1 */
    --color-state-reset: #f472b6; /* 카드 대비 5.80:1 */

    --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.6);
    --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.8);
}