/* ============================================================
   MZWORLD DESIGN SYSTEM — CSS TOKENS
   2026 Edition · Light-first · Minimal · Accessible
   ============================================================ */

:root {
  /* ─── Color Primitives ─── */
  --hue-brand: 262;
  --hue-accent: 338;
  --hue-sky: 193;

  /* ─── Semantic Colors (LIGHT MODE DEFAULT) ─── */
  --bg-base:       #FAFAFC;
  --bg-elevated:   #FFFFFF;
  --bg-overlay:    rgba(255, 255, 255, 0.94);
  --bg-card:       #FFFFFF;
  --bg-card-hover: #F7F7FB;
  --bg-input:      #F4F4F8;
  --bg-muted:      #F0F0F5;

  --border-subtle:  rgba(15, 15, 35, 0.06);
  --border-default: rgba(15, 15, 35, 0.1);
  --border-strong:  rgba(15, 15, 35, 0.18);

  /* ─── Brand Palette (Solid, no gradients) ─── */
  --brand-primary:  #6D43F0;       /* 메인 보라 — 차분한 톤 */
  --brand-primary-hover: #5C36DD;
  --brand-primary-light: rgba(109, 67, 240, 0.08);
  --brand-primary-soft:  rgba(109, 67, 240, 0.12);

  --brand-accent:   #FF4D7E;       /* 강조 핑크 — 사용 최소화 */
  --brand-violet:   #6D43F0;       /* legacy alias */
  --brand-pink:     #FF4D7E;       /* legacy alias */
  --brand-cyan:     #00B8D9;       /* 정보 sky blue */
  --brand-lime:     #00A85A;       /* 성공 green */
  --brand-orange:   #FF7A1A;       /* 알림 orange */

  /* gradient는 hero/CTA 한두 곳에서만 사용 */
  --brand-gradient-main: linear-gradient(135deg, #6D43F0 0%, #8B5FFF 100%);
  --brand-gradient-sky:  linear-gradient(135deg, #00B8D9 0%, #6D43F0 100%);
  --brand-gradient-hot:  linear-gradient(135deg, #FF7A1A 0%, #FF4D7E 100%);
  --brand-gradient-lime: linear-gradient(135deg, #00A85A 0%, #00B8D9 100%);

  /* ─── Text Colors (WCAG AA 대비) ─── */
  --text-primary:   #1A1A2E;     /* 진한 텍스트 (대비 14.4:1) */
  --text-secondary: #4D4D6B;     /* 보조 텍스트 (대비 8.2:1) */
  --text-tertiary:  #7A7A95;     /* 보조 작은 텍스트 (대비 4.6:1) */
  --text-disabled:  #B5B5C8;
  --text-inverse:   #FFFFFF;
  --text-link:      #6D43F0;

  /* ─── Status Colors ─── */
  --status-success: #00A85A;
  --status-warning: #E8951F;
  --status-error:   #D63146;
  --status-info:    #0085D6;

  /* ─── SNS Brand Colors ─── */
  --kakao-bg:    #FEE500;
  --kakao-text:  #191919;
  --naver-bg:    #03C75A;
  --naver-text:  #FFFFFF;
  --google-bg:   #FFFFFF;
  --google-text: #3C4043;
  --apple-bg:    #000000;
  --apple-text:  #FFFFFF;

  /* ─── Spacing (4px base grid) ─── */
  --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;

  /* ─── Border Radius ─── */
  --r-xs:   4px;
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   16px;
  --r-xl:   20px;
  --r-2xl:  24px;
  --r-3xl:  32px;
  --r-full: 9999px;

  /* ─── Typography (접근성 향상 — 14px 기본) ─── */
  --font-sans: 'Pretendard Variable', 'Pretendard', -apple-system,
               'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;

  --text-2xs: clamp(11px, 1.8vw, 12px);
  --text-xs:  clamp(12px, 2vw,   13px);
  --text-sm:  clamp(13px, 2.2vw, 14px);
  --text-md:  clamp(15px, 2.5vw, 16px);
  --text-lg:  clamp(17px, 2.8vw, 18px);
  --text-xl:  clamp(19px, 3vw,   20px);
  --text-2xl: clamp(22px, 3.5vw, 24px);
  --text-3xl: clamp(26px, 4vw,   30px);
  --text-4xl: clamp(30px, 5vw,   38px);
  --text-5xl: clamp(38px, 6vw,   48px);
  --text-6xl: clamp(48px, 8vw,   64px);

  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-extrabold: 800;
  --weight-black:     900;

  --leading-tight:   1.2;
  --leading-snug:    1.35;
  --leading-normal:  1.55;
  --leading-relaxed: 1.7;
  --leading-loose:   2;

  /* ─── Shadows (Light mode — soft & subtle) ─── */
  --shadow-sm:  0 1px 2px rgba(15, 15, 35, 0.04), 0 1px 1px rgba(15, 15, 35, 0.03);
  --shadow-md:  0 2px 6px rgba(15, 15, 35, 0.06), 0 4px 10px rgba(15, 15, 35, 0.04);
  --shadow-lg:  0 4px 12px rgba(15, 15, 35, 0.08), 0 10px 24px rgba(15, 15, 35, 0.06);
  --shadow-xl:  0 8px 28px rgba(15, 15, 35, 0.12), 0 20px 40px rgba(15, 15, 35, 0.08);
  --shadow-focus: 0 0 0 3px rgba(109, 67, 240, 0.18);

  /* ─── Transitions ─── */
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring:    cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth:    cubic-bezier(0.4, 0, 0.2, 1);

  --dur-fast:   120ms;
  --dur-base:   180ms;
  --dur-slow:   300ms;
  --dur-slower: 450ms;

  /* ─── Z-Index Scale ─── */
  --z-below:   -1;
  --z-base:     0;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;

  /* ─── Layout ─── */
  --max-width:       1200px;
  --sidebar-width:   240px;
  --nav-height:      60px;
  --bottom-nav-h:    64px;
}

/* ═══════════════════════════════════════════════════════════
   DARK MODE — Trendy soft dark (not pure black)
   ═══════════════════════════════════════════════════════════ */
[data-theme="dark"] {
  --bg-base:       #14141C;
  --bg-elevated:   #1C1C28;
  --bg-overlay:    rgba(20, 20, 28, 0.92);
  --bg-card:       #1F1F2D;
  --bg-card-hover: #262635;
  --bg-input:      #262635;
  --bg-muted:      #2A2A38;

  --border-subtle:  rgba(255, 255, 255, 0.06);
  --border-default: rgba(255, 255, 255, 0.1);
  --border-strong:  rgba(255, 255, 255, 0.2);

  --brand-primary-light: rgba(139, 95, 255, 0.12);
  --brand-primary-soft:  rgba(139, 95, 255, 0.18);
  --brand-primary:       #8B5FFF;
  --brand-primary-hover: #A07AFF;
  --brand-violet:        #8B5FFF;

  --text-primary:   #F2F2F8;
  --text-secondary: #B8B8CC;
  --text-tertiary:  #7A7A95;
  --text-disabled:  #4A4A5C;
  --text-inverse:   #14141C;
  --text-link:      #A07AFF;

  --shadow-sm:  0 1px 3px 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-xl:  0 16px 40px rgba(0,0,0,0.6);
  --shadow-focus: 0 0 0 3px rgba(139, 95, 255, 0.3);
}