/**
 * Toolly (MultiAgent Harness Korea) Design Tokens
 * 근거: /home/toolly/Image/ 시안 6장(2026-08-20 교체본: Main/Engine/academy/service/book/guide) —
 * ImageMagick 픽셀 샘플링으로 컬러 실측 검증(docs/design/design-system.md §1), PM 확정(TASK:T007).
 * 상세 스펙 문서: docs/design/design-system.md · docs/design/tokens.css(원본)
 * TASK:T012 — 구 T002 값(#4F6EF7, #0B0F1E, pill 버튼 등)은 전량 폐기.
 *
 * :root 에 정의된 커스텀 프로퍼티만 쓰고, 컴포넌트 CSS(main.css)에서는 하드코딩 HEX를 직접 쓰지 않는다.
 */

:root {
  /* ===== 1. Color — Primary (실측) ===== */
  --color-primary: #0349D6;
  --color-primary-dark: #073CA4;
  --color-primary-light: #0F51D1;
  --color-primary-rgb: 3, 73, 214; /* rgba() 틴트 계산용 */
  --gradient-primary: linear-gradient(180deg, #0F51D1 0%, #073CA4 100%);

  /* ===== 2. Color — 카테고리 아이콘 컬러 (제품 라인 구분 전용, 버튼/링크에는 사용 금지) ===== */
  --color-cat-engine: #0349D6;
  --color-cat-engine-rgb: 3, 73, 214;
  --color-cat-academy: #0D7377;
  --color-cat-academy-rgb: 13, 115, 119;
  --color-cat-book: #6D28D9;
  --color-cat-book-rgb: 109, 40, 217;
  --color-cat-service: #F97316;
  --color-cat-service-rgb: 249, 115, 22;
  --color-cat-package: #059669;
  --color-cat-package-rgb: 5, 150, 105;

  /* ===== 3. Color — Background / Surface (실측) ===== */
  --color-bg-dark: #00143F;
  --color-bg-dark-2: #052867;
  --gradient-bg-dark: radial-gradient(ellipse at 60% 30%, #052867 0%, #00143F 75%);
  --color-bg-white: #FFFFFF;
  --color-bg-alt: #F9FAFC;
  --color-surface: #FFFFFF;
  --color-surface-tint: #EFF3FC; /* 다크 섹션 위 라이트 카드/뱃지 (academy LEVEL 뱃지 등) */

  /* ===== 4. Color — Border ===== */
  --color-border: #E5E9F0;
  --color-border-dark: #1F2E52;

  /* ===== 5. Color — Text ===== */
  --color-text-primary: #0F172A;
  --color-text-secondary: #5B6478;
  --color-text-muted: #94A0B8;
  --color-text-on-dark: #FFFFFF;
  --color-text-on-dark-secondary: #AAB4CE;

  /* ===== 6. Color — Status / Accent ===== */
  --color-success: #22C55E;
  --color-warning: #F59E0B;
  --color-danger: #EF4444;
  --color-badge-premium: #D4A537;

  /* ===== 7. Typography ===== */
  --font-family-base: "Pretendard Variable", "Pretendard", -apple-system, BlinkMacSystemFont, "Noto Sans KR", "Segoe UI", sans-serif;
  --font-family-mono: "JetBrains Mono", "D2Coding", Consolas, monospace;

  --font-display-size: 40px;
  --font-display-lh: 1.25;
  --font-display-weight: 800;

  --font-h1-size: 34px;
  --font-h1-lh: 1.3;
  --font-h1-weight: 800;

  --font-h2-size: 28px;
  --font-h2-lh: 1.3;
  --font-h2-weight: 700;

  --font-h3-size: 20px;
  --font-h3-lh: 1.4;
  --font-h3-weight: 700;

  --font-h4-size: 17px;
  --font-h4-lh: 1.4;
  --font-h4-weight: 600;

  --font-body-lg-size: 16px;
  --font-body-lg-lh: 1.6;
  --font-body-lg-weight: 400;

  --font-body-size: 14px;
  --font-body-lh: 1.6;
  --font-body-weight: 400;

  --font-caption-size: 12px;
  --font-caption-lh: 1.5;
  --font-caption-weight: 500;

  --font-eyebrow-size: 12px;
  --font-eyebrow-lh: 1.4;
  --font-eyebrow-weight: 700;
  --font-eyebrow-tracking: 0.04em;

  --font-price-size: 30px;
  --font-price-lh: 1.15;
  --font-price-weight: 800;

  /* 모바일(<768px) 축소 배수 기준 값 */
  --font-display-size-mobile: 28px;
  --font-h1-size-mobile: 24px;
  --font-h2-size-mobile: 21px;
  --font-h3-size-mobile: 17px;

  /* ===== 8. Spacing scale (8px base) ===== */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 120px;

  --section-padding-y: 72px;
  --section-padding-y-hero: 88px;
  --section-padding-y-mobile: 40px;
  --card-padding: var(--space-5);
  --card-gap: var(--space-4);
  --card-gap-loose: var(--space-5);

  /* ===== 9. Layout / Grid ===== */
  --container-max: 1200px;
  --container-padding-x: var(--space-5);
  --container-padding-x-mobile: 20px;
  --grid-columns: 12;
  --grid-gutter: 20px;

  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;

  /* ===== 10. Radius (버튼은 pill 아님 — 10px 고정) ===== */
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-full: 999px;

  /* ===== 11. Shadow ===== */
  --shadow-sm: 0 1px 4px rgba(15, 23, 42, 0.05);
  --shadow-md: 0 4px 16px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 8px 28px rgba(15, 23, 42, 0.14);
  --shadow-glow: 0 0 32px rgba(3, 73, 214, 0.35);

  /* ===== 12. Button ===== */
  --btn-padding-y: 12px;
  --btn-padding-x: 24px;
  --btn-padding-y-sm: 10px;
  --btn-padding-x-sm: 20px;
  --btn-padding-y-lg: 16px;
  --btn-padding-x-lg: 32px;
  --btn-radius: var(--radius-md);
  --btn-border-width: 1.5px;

  /* ===== 13. Header / GNB ===== */
  --header-height: 64px;
  --header-height-mobile: 56px;

  /* ===== 14. Z-index scale ===== */
  --z-header: 100;
  --z-dropdown: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-toast: 500;
}

/* 다크/라이트/alt 섹션 스코프에서 컴포넌트가 참조하는 시맨틱 별칭. */
.is-dark-section {
  --section-bg: var(--color-bg-dark);
  --section-text: var(--color-text-on-dark);
  --section-text-secondary: var(--color-text-on-dark-secondary);
  --section-border: var(--color-border-dark);
  --section-surface: var(--color-surface-tint);
}

.is-light-section {
  --section-bg: var(--color-bg-white);
  --section-text: var(--color-text-primary);
  --section-text-secondary: var(--color-text-secondary);
  --section-border: var(--color-border);
  --section-surface: var(--color-surface);
}

.is-alt-section {
  --section-bg: var(--color-bg-alt);
  --section-text: var(--color-text-primary);
  --section-text-secondary: var(--color-text-secondary);
  --section-border: var(--color-border);
  --section-surface: var(--color-surface);
}