/* ============================================================
   ibank — 디자인 토큰 (네이비 + 라임)
   ------------------------------------------------------------
   소스: "iBank 랜딩 히어로 섹션" / Hero-v2.dc.html
   무드: 딥네이비 배경 · 형광 라임 포인트 · 시네마틱
   ============================================================ */

:root {
  /* 배경 (딥네이비) */
  --color-bg-page:     #0a0e1a;
  --color-bg-card:     #0c1426;
  --color-bg-deep:     #060912;
  --color-bg-elevated: #0e1626;
  --color-bg-abyss:    #0a1322;

  /* 텍스트 */
  --color-text-primary:   #ffffff;
  --color-text-secondary: #c4cbd9;
  --color-text-muted:     #5b647a;
  --color-text-ash:       #666666;

  /* 포인트 (라임 + 네이비) */
  --color-accent-lime: #d3fb52;
  --color-accent-navy: #304680;
  --color-accent-blue: #5674c8;
  --color-accent-warn: #ff9b85;

  /* 경계선 */
  --color-border:        rgba(255, 255, 255, 0.12);
  --color-border-strong: #1b2740;
  --color-line-light:    #e5e5e5;

  /* 그라데이션 */
  --gradient-hero: linear-gradient(168deg, #0a0e1a 0%, #0c1424 60%, #060912 100%);
  --gradient-cta:  linear-gradient(90deg, #d3fb52 0%, #b6e63f 100%);
  --gradient-glow: radial-gradient(closest-side, rgba(48, 70, 128, .42) 0%, rgba(48, 70, 128, 0) 70%);

  /* 타이포 */
  --font-display: "Clash Grotesk", "Archivo", system-ui, sans-serif;
  --font-body:    "Satoshi", "Pretendard", system-ui, sans-serif;
  --text-caption:    12px;
  --text-body:       16px;
  --text-subheading: 20px;
  --text-heading:    24px;
  --text-heading-lg: 48px;
  --text-display:    72px;
  --weight-regular: 400;
  --weight-medium:  540;
  --weight-bold:    700;

  /* 간격·모양 */
  --section-gap:  48px;
  --card-padding: 24px;
  --element-gap:  16px;
  --page-max:   1200px;
  --radius-input:  10px;
  --radius-button: 12px;
  --radius-card:   16px;
  --radius-pill: 9999px;

  /* 섀도 */
  --shadow-glow: rgba(211, 251, 82, .42) 0px 10px 26px 0px;
  --shadow-card: rgba(0, 0, 0, .55) 0px 24px 50px -12px;

  /* ── AI 상담 패널 (기존 index --ai-* 값 그대로) ── */
  --color-ai-ink:      #0a0e14;
  --color-ai-bg:       #1c2536;
  --color-ai-panel:    #222c40;
  --color-ai-panel2:   #171d2a;
  --color-ai-field:    #1e2636;
  --color-ai-text:     #e7ecf4;
  --color-ai-dim:      rgba(255, 255, 255, 0.8);
  --color-ai-line:     rgba(255, 255, 255, 0.19);
  --color-ai-glow-a:   0.14;
  --color-ai-doc-card: #333d50;
  --color-ai-doc-ink:  rgba(255, 255, 255, 0.9);
  --color-ai-doc-head: #e9edf5;

  /* ── 레거시 별칭 (index.html / JS --hs-* · --ai-* 호환) ── */
  --hs-lime:  var(--color-accent-lime);
  --hs-ink:   var(--color-bg-page);
  --hs-ash:   var(--color-text-ash);
  --hs-white: var(--color-text-primary);
  --hs-abyss: var(--color-bg-abyss);
  --hs-line:  var(--color-line-light);

  --ai-lime:         var(--color-accent-lime);
  --ai-ink:          var(--color-ai-ink);
  --ai-bg:           var(--color-ai-bg);
  --ai-panel:        var(--color-ai-panel);
  --ai-panel2:       var(--color-ai-panel2);
  --ai-field:        var(--color-ai-field);
  --ai-text:         var(--color-ai-text);
  --ai-dim:          var(--color-ai-dim);
  --ai-line:         var(--color-ai-line);
  --ai-glow-a:       var(--color-ai-glow-a);
  --ai-doc-bg:       var(--color-ai-panel);
  --ai-doc-card:     var(--color-ai-doc-card);
  --ai-doc-ink:      var(--color-ai-doc-ink);
  --ai-doc-head:     var(--color-ai-doc-head);
  --ai-doc-line:     var(--color-ai-line);
  --ai-doc-lime-ink: var(--color-accent-lime);
}