/* =============================================================================
   에이플론 · 디자인 시스템 — 디자인 토큰 (Design Tokens)
   모든 색상 / 타이포 / 간격 / 그림자 / 모션의 단일 진실 공급원(SSOT).
   컴포넌트와 페이지 CSS는 절대 하드코딩하지 말고 이 변수만 참조한다.
   ========================================================================== */

:root {
  /* ---------------------------------------------------------------------------
     1. 컬러 — 브랜드 블루 스케일 (Primary)
     ------------------------------------------------------------------------ */
  --blue-50:  #eef4ff;
  --blue-100: #dce8ff;
  --blue-200: #b9d1ff;
  --blue-300: #8ab2ff;
  --blue-400: #5b8dfb;
  --blue-500: #2f6bf6;   /* ← Primary */
  --blue-600: #1e54e0;
  --blue-700: #1842bc;
  --blue-800: #163a99;
  --blue-900: #0f2a6e;

  /* 딥 네이비 (다크 섹션 / 푸터) */
  --navy-600: #122a73;
  --navy-700: #0e2360;
  --navy-800: #0a1a4a;
  --navy-900: #060f33;

  /* 액션 — 오렌지 (CTA 전용 / 신뢰 블루와 대비) · ui-ux-pro-max 추천 */
  --orange-400: #ff9a4d;
  --orange-500: #f97316;   /* ← Action / CTA */
  --orange-600: #e85d04;
  --orange-700: #c2410c;

  /* 액센트 — 골드(수상/인증), 시안(하이라이트), 그린(성공) */
  --gold-300: #ffe199;
  --gold-400: #ffcb57;
  --gold-500: #f5b53d;
  --gold-600: #d9952a;

  --cyan-300: #7fe6f7;
  --cyan-400: #38d6f0;
  --cyan-500: #16b8d8;

  --green-400: #34d39a;
  --green-500: #12b886;
  --red-500:   #f0455a;

  /* 중립(슬레이트) */
  --slate-0:   #ffffff;
  --slate-50:  #f7f9fc;
  --slate-100: #eef2f8;
  --slate-200: #e2e8f2;
  --slate-300: #cdd6e4;
  --slate-400: #9aa7bd;
  --slate-500: #6b7892;
  --slate-600: #4d5874;
  --slate-700: #36405a;
  --slate-800: #232c44;
  --slate-900: #141a2e;

  /* ---------------------------------------------------------------------------
     2. 시맨틱 컬러 (역할 기반) — UI는 가급적 이 토큰을 사용
     ------------------------------------------------------------------------ */
  --color-primary:        var(--blue-500);
  --color-primary-strong: var(--blue-600);
  --color-primary-soft:   var(--blue-50);
  --color-accent:         var(--gold-500);
  --color-action:         var(--orange-500);   /* CTA 버튼 */
  --color-action-strong:  var(--orange-600);

  --color-bg:             var(--slate-0);
  --color-bg-soft:        var(--slate-50);
  --color-bg-muted:       var(--slate-100);
  --color-bg-navy:        var(--navy-800);

  --color-text:           var(--slate-900);
  --color-text-soft:      var(--slate-600);
  --color-text-muted:     var(--slate-500);
  --color-text-invert:    #ffffff;
  --color-text-on-navy:   #c7d4f5;

  --color-border:         var(--slate-200);
  --color-border-strong:  var(--slate-300);

  /* ---------------------------------------------------------------------------
     3. 그라데이션 & 광원(glow)
     ------------------------------------------------------------------------ */
  --grad-hero: radial-gradient(1200px 600px at 80% -10%, #d8e6ff 0%, rgba(216,230,255,0) 60%),
               radial-gradient(900px 500px at -10% 10%, #e9f0ff 0%, rgba(233,240,255,0) 55%),
               linear-gradient(180deg, #f1f6ff 0%, #ffffff 70%);
  --grad-cta:    linear-gradient(135deg, #3b78ff 0%, #1e54e0 100%);
  --grad-cta-hover: linear-gradient(135deg, #2f6bf6 0%, #163a99 100%);
  --grad-action:       linear-gradient(135deg, #ff8a3d 0%, #e85d04 100%);  /* CTA 오렌지 */
  --grad-action-hover: linear-gradient(135deg, #f97316 0%, #c2410c 100%);
  --grad-navy:   linear-gradient(135deg, #122a73 0%, #0a1a4a 55%, #060f33 100%);
  --grad-navy-card: linear-gradient(135deg, #1a3a8f 0%, #0e2360 100%);
  --grad-gold:   linear-gradient(135deg, #ffd874 0%, #f5b53d 100%);
  --grad-sheen:  linear-gradient(120deg, rgba(255,255,255,0) 20%, rgba(255,255,255,.55) 50%, rgba(255,255,255,0) 80%);

  --glow-primary: 0 18px 40px -12px rgba(47,107,246,.55);
  --glow-action:  0 18px 40px -12px rgba(232,93,4,.5);
  --glow-gold:    0 16px 34px -12px rgba(245,181,61,.55);

  /* 카드 아이콘 타일 컬러(화려한 버전) — 카드별 비비드 그라데이션 + 컬러 글로우 */
  --grad-tile-blue:   linear-gradient(150deg, #5b9bff 0%, #1e54e0 100%);
  --grad-tile-violet: linear-gradient(150deg, #a877ff 0%, #6a35d4 100%);
  --grad-tile-teal:   linear-gradient(150deg, #34e0cf 0%, #0c9c97 100%);
  --grad-tile-amber:  linear-gradient(150deg, #ffb24d 0%, #f5712b 100%);
  --grad-tile-rose:   linear-gradient(150deg, #ff86a6 0%, #e23d6d 100%);
  --grad-tile-green:  linear-gradient(150deg, #4fe08a 0%, #16a34a 100%);

  --glow-tile-blue:   0 16px 30px -10px rgba(47,107,246,.55);
  --glow-tile-violet: 0 16px 30px -10px rgba(124,77,255,.50);
  --glow-tile-teal:   0 16px 30px -10px rgba(16,170,160,.50);
  --glow-tile-amber:  0 16px 30px -10px rgba(245,113,43,.50);
  --glow-tile-rose:   0 16px 30px -10px rgba(226,61,109,.50);
  --glow-tile-green:  0 16px 30px -10px rgba(22,163,74,.50);

  /* ---------------------------------------------------------------------------
     4. 타이포그래피
     ------------------------------------------------------------------------ */
  --font-sans: "Pretendard Variable", "Pretendard", -apple-system, BlinkMacSystemFont,
               "Apple SD Gothic Neo", "Segoe UI", Roboto, "Helvetica Neue",
               "Malgun Gothic", sans-serif;
  /* 전 텍스트 Pretendard 통일 (숫자/영문 포함) */
  --font-num:  "Pretendard Variable", "Pretendard", system-ui, sans-serif;

  /* 폰트 크기 — clamp()로 반응형 스케일 (모바일 → 데스크탑) */
  --fs-display: clamp(2.6rem, 1.4rem + 4.2vw, 4.5rem);   /* 히어로 헤드라인 */
  --fs-h1:      clamp(2.1rem, 1.3rem + 2.8vw, 3.25rem);
  --fs-h2:      clamp(1.7rem, 1.2rem + 1.9vw, 2.6rem);   /* 섹션 타이틀 */
  --fs-h3:      clamp(1.3rem, 1.05rem + 0.9vw, 1.7rem);
  --fs-h4:      clamp(1.1rem, 1rem + 0.45vw, 1.3rem);
  --fs-lg:      1.175rem;
  --fs-base:    1rem;
  --fs-sm:      0.9rem;
  --fs-xs:      0.8rem;
  --fs-2xs:     0.72rem;

  --lh-tight:   1.15;
  --lh-snug:    1.35;
  --lh-base:    1.65;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;
  --fw-extra:   800;

  --ls-tight: -0.02em;
  --ls-snug:  -0.01em;

  /* ---------------------------------------------------------------------------
     5. 간격 스케일 (4px 베이스)
     ------------------------------------------------------------------------ */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* 섹션 세로 패딩 (반응형) */
  --section-y: clamp(64px, 4vw + 40px, 120px);

  /* ---------------------------------------------------------------------------
     6. 레이아웃
     ------------------------------------------------------------------------ */
  --container:      1200px;
  --container-wide: 1320px;
  --container-pad:  clamp(20px, 5vw, 40px);
  --header-h:       72px;

  /* ---------------------------------------------------------------------------
     7. 라운드(Radius)
     ------------------------------------------------------------------------ */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   22px;
  --radius-2xl:  30px;
  --radius-pill: 999px;

  /* ---------------------------------------------------------------------------
     8. 그림자(Shadow)
     ------------------------------------------------------------------------ */
  --shadow-xs: 0 1px 2px rgba(20,26,46,.06);
  --shadow-sm: 0 2px 8px rgba(20,26,46,.06);
  --shadow-md: 0 8px 24px -8px rgba(20,26,46,.12);
  --shadow-lg: 0 18px 48px -16px rgba(20,26,46,.18);
  --shadow-xl: 0 34px 70px -28px rgba(15,42,110,.32);
  --shadow-card-hover: 0 26px 60px -22px rgba(30,84,224,.36);

  /* ---------------------------------------------------------------------------
     9. 모션
     ------------------------------------------------------------------------ */
  --ease-out:   cubic-bezier(.22, 1, .36, 1);
  --ease-inout: cubic-bezier(.65, 0, .35, 1);
  --ease-spring:cubic-bezier(.34, 1.56, .64, 1);
  --dur-fast:   .16s;
  --dur-base:   .28s;
  --dur-slow:   .5s;

  /* ---------------------------------------------------------------------------
     10. z-index 스케일
     ------------------------------------------------------------------------ */
  --z-base:   1;
  --z-sticky: 100;
  --z-header: 200;
  --z-dock:   300;
  --z-modal:  400;
  --z-toast:  500;
}

/* 접근성: 모션 최소화 선호 사용자 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}