/* ============================================================
   MAGOK LE WEST — DESIGN TOKENS
   v1.0.0 · 2026-05-11
   박무진 대표 (유에이엠코리아텍 CEO) · CSO 용유미 운영
   마곡르웨스트.com 단일 운영 토큰 파일
   ============================================================ */

:root {
  /* ---------- BRAND COLORS (MG 브랜드 고정) ---------- */
  --c-bg:          #0B0D10;   /* 다크 차콜 (메인 배경) */
  --c-brand:       #C4A96A;   /* 골드 (브랜드 액센트) */
  --c-brand-dim:   #94804F;
  --c-brand-light: #FFE9C7;
  --c-surface:     #FAF7EE;   /* 베이지 (섹션 배경) */
  --c-paper:       #FFFFFF;
  --c-ink:         #1F2937;   /* Navy 본문 */
  --c-ink-muted:   #6B7785;
  --c-ink-subtle:  #9AA4B1;
  --c-ink-inverse: #F5F8FA;
  --c-deep:        #7C2D12;   /* 딥 브라운 (강조/CTA) */
  --c-deep-darker: #5C1A05;

  --c-highlight-blue: #1E3A8A;
  --c-highlight-teal: #0F766E;
  --c-stroke-hair: #E5E9ED;
  --c-stroke-card: #D8DEE5;
  --c-stroke-warm: #E8DFC9;

  --c-alert-warn:  #FFB833;
  --c-alert-error: #FF7F65;
  --c-alert-ok:    #2A8B7C;
  --c-naver:       #03C75A;

  /* ---------- TYPOGRAPHY ---------- */
  --ff-head:  'Noto Sans CJK KR', 'Pretendard Variable', system-ui, -apple-system, sans-serif;
  --ff-body:  'Noto Sans CJK KR', 'Pretendard Variable', system-ui, -apple-system, sans-serif;
  --ff-mono:  'Roboto Mono', 'IBM Plex Mono', ui-monospace, monospace;
  --ff-serif: 'Noto Serif KR', 'Source Han Serif KR', serif;

  --fs-display-xl: 60px; --lh-display-xl: 1.08; --ls-display-xl: -0.02em;
  --fs-display-lg: 48px; --lh-display-lg: 1.10; --ls-display-lg: -0.02em;
  --fs-h1: 36px;  --lh-h1: 1.20; --ls-h1: -0.015em;
  --fs-h2: 28px;  --lh-h2: 1.25; --ls-h2: -0.01em;
  --fs-h3: 22px;  --lh-h3: 1.30; --ls-h3: -0.005em;
  --fs-h4: 18px;  --lh-h4: 1.35;
  --fs-body-lg: 17px; --lh-body-lg: 1.65;
  --fs-body:    15px; --lh-body:    1.70;
  --fs-body-sm: 13px; --lh-body-sm: 1.60;
  --fs-caption: 12px; --lh-caption: 1.50;
  --fs-kpi-xl: 56px;  --lh-kpi-xl: 1.00;
  --fs-kpi:    32px;  --lh-kpi:    1.05;

  /* ---------- SPACING (8px grid) ---------- */
  --sp-0: 0;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;
  --sp-32: 128px;

  /* ---------- RADIUS ---------- */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-pill: 999px;

  /* ---------- SHADOW ---------- */
  --sh-card:    0 1px 2px rgba(15,23,42,0.04), 0 2px 8px rgba(15,23,42,0.06);
  --sh-lifted:  0 4px 12px rgba(15,23,42,0.08), 0 12px 32px rgba(15,23,42,0.10);
  --sh-overlay: 0 8px 24px rgba(15,23,42,0.16), 0 24px 64px rgba(15,23,42,0.20);
  --sh-inset:   inset 0 1px 0 rgba(255,255,255,0.06);
  --sh-gold:    0 12px 32px rgba(196,169,106,0.30);
  --sh-brown:   0 12px 32px rgba(124,45,18,0.30);

  /* ---------- MOTION ---------- */
  --dur-instant: 80ms;
  --dur-fast:    160ms;
  --dur-base:    240ms;
  --dur-slow:    400ms;
  --dur-deliberate: 640ms;
  --ease-standard: cubic-bezier(0.2, 0.0, 0.0, 1.0);
  --ease-decel:    cubic-bezier(0.0, 0.0, 0.2, 1.0);
  --ease-accel:    cubic-bezier(0.4, 0.0, 1.0, 1.0);
  --ease-premium:  cubic-bezier(0.16, 1.0, 0.3, 1.0);

  /* ---------- COMPONENT DENSITY ---------- */
  --pad-card: 24px;
  --pad-card-compact: 16px;
  --pad-card-loose: 32px;
  --gap-grid: 16px;
  --gap-section: 64px;

  /* ---------- BRAND LOCKUP ---------- */
  --brand-name:     'MAGOK LE WEST';
  --brand-lockup:   '마곡 르웨스트 · MAGOK · LE · WEST';
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-instant: 0ms;
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
    --dur-deliberate: 0ms;
  }
}