/* ===================================
   Design Tokens
   Synced with: docs/design-system.md
   Last Updated: 2026-06-03
   =================================== */

/* --- Web Fonts --- */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css');

:root {
  /* ========================
     COLOR — Primary
     ======================== */
  --color-primary: #ea1b2c;
  --color-primary-hover: rgba(234, 27, 44, 0.75);
  --color-primary-subtle: rgba(234, 27, 44, 0.12);

  /* ========================
     COLOR — Dark Theme Base
     ======================== */
  --color-bg-primary: #0a0a0a;
  --color-bg-secondary: #111111;
  --color-bg-tertiary: #353535;
  --color-bg-elevated: #222222;
  --color-surface: #2a2a2a;
  --color-bg-tertiary-transparent: rgba(26, 26, 26, 0.65);

  /* ========================
     COLOR — Text
     ======================== */
  --color-text-primary: #ffffff;
  --color-text-secondary: #a0a0a0;
  --color-text-tertiary: #999999;
  --color-text-inverse: #0a0a0a;

  /* ========================
     COLOR — Semantic
     ======================== */
  --color-success: #22c55e;
  --color-warning: #f59e0b;
  --color-error: #ef4444;
  --color-info: #3b82f6;

  /* ========================
     COLOR — Border
     ======================== */
  --color-border: #575656;
  --color-border-hover: #878686;
  --color-border-focus: #ea1b2c;

  /* ========================
     TYPOGRAPHY — Font Tokens
     ======================== */
  --font-primary: 'Pretendard', sans-serif;
  --font-secondary: 'Montserrat', var(--font-primary);
  
  --font-en-primary: 'Inter', sans-serif;
  --font-en-secondary: 'Montserrat', var(--font-en-primary);

  /* ========================
     TYPOGRAPHY — Hierarchy
     ======================== */
  /* L0 - Display Title */
  --type-display-font: var(--font-secondary);
  --type-display-size: 72px;
  --type-display-weight: 800;
  --type-display-line: 1.2;

  /* L1 - Page Title */
  --type-title-font: var(--font-secondary);
  --type-title-size: 60px;
  --type-title-weight: 800;
  --type-title-line: 1.2;

  /* L2 - Section Heading */
  --type-section-heading-font: var(--font-primary);
  --type-section-heading-size: 36px;
  --type-section-heading-weight: 800;
  --type-section-heading-line: 1.2;

  /* L3 - Content Heading */
  --type-content-heading-font: var(--font-primary);
  --type-content-heading-size: 28px;
  --type-content-heading-weight: 700;
  --type-content-heading-line: 1.35;

  /* L4 - Content Subheading */
  --type-content-subheading-font: var(--font-primary);
  --type-content-subheading-size: 22px;
  --type-content-subheading-weight: 600;
  --type-content-subheading-line: 1.35;

  /* L5 - Content Body */
  --type-body-font: var(--font-primary);
  --type-body-size: 18px;
  --type-body-weight: 300;
  --type-body-line: 1.5;

  /* L6 - Content Body Strong */
  --type-body-font: var(--font-primary);
  --type-body-strong-size: 18px;
  --type-body-strong-weight: 600;
  --type-body-line: 1.5;

  /* ========================
     TYPOGRAPHY — Letter Spacing
     ======================== */
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.08em;

  /* ========================
     SPACING — 8px Grid
     ======================== */
  --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: 128px;
  --space-11: 200px;


  /* ========================
     BORDER & RADIUS
     ======================== */
  --radius-none: 0;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 9999px;
  --border-width: 1px;

  /* ========================
     SHADOW
     ======================== */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
  --shadow-glow: 0 0 20px rgba(234, 27, 44, 0.3);

  /* ========================
     TRANSITION
     ======================== */
  --duration-fast: 120ms;
  --duration-normal: 240ms;
  --duration-slow: 400ms;
  --easing-default: cubic-bezier(0.4, 0, 0.2, 1);
  --easing-in: cubic-bezier(0.4, 0, 1, 1);
  --easing-out: cubic-bezier(0, 0, 0.2, 1);

  /* ========================
     LAYOUT — Breakpoints
     ======================== */
  --container-max: 1280px;
  --container-padding: 40px;
  --grid-columns: 12;
  --grid-gutter: 24px;
  --header-height: 140px;
  --page-header-height: 450px;
  --page-header-padding-top: var(--space-11);
}

/* --- Responsive Token Overrides --- */

/* Desktop: ~1440px */
@media (min-width: 1441px) {
  :root {

  }
}

/* PC: ~1024px */
@media (max-width: 1440px) {
  :root {

  }
}

/* Tablet: ~768px */
@media (max-width: 1024px) {
  :root {
   --container-padding: 24px;
  }
}

/* Mobile: ~640px */
@media (max-width: 640px) {
  :root {
   --container-padding: 12px;
   --page-header-height: 260px;
   --page-header-padding-top: var(--space-10);
   --type-title-size: 48px;
  }
}

/* --- Language Specific Tokens --- */
html[lang="en"] {
  --type-section-heading-size: 30px;
  --type-content-subheading-size: 17px;
  --type-body-size: 15px;
  --type-body-strong-size: 15px;
}