/* ============================================
   TIMBOT — variables.css
   ✅ 컬러 변경은 여기서만 하면 전체 적용
   ============================================ */


:root {

  /* ── 브랜드 컬러 ─────────────────────────── */
  --color-black:       #000000;
  --color-white:       #ffffff;
  --white:             #ffffff;
  --black:             #000000;

  /* 블루 (#00A1FF) */
  --color-blue:        #00A1FF;
  --color-blue-light:  #00A1FF;
  --color-blue-dark:   #00A1FF;
  --color-blue-soft:   rgba(0, 161, 255, 0.12);
  --color-blue-glow:   rgba(0, 161, 255, 0.35);
  --color-blue-ring:   rgba(0, 161, 255, 0.22);
 
  /* 시안 (#1FE3FF) */
  --color-cyan:        #1fceff;
  --color-cyan-light:  #1fceff;
  --color-cyan-dark:   #1fceff;
  --color-cyan-soft:   rgba(31, 206, 255, 0.12);
  --color-cyan-glow:   rgba(31, 206, 255, 0.35);
  --color-cyan-ring:   rgba(31, 206, 255, 0.22);
 
  /* 그레이 스케일 */
  --color-gray-50:     #f7f7f7;
  --color-gray-100:    #f0f0f0;
  --color-gray-200:    #e0e0e0;
  --color-gray-300:    #c2c2c2;
  --color-gray-400:    #9e9e9e;
  --color-gray-500:    #6b6b6b;
  --color-gray-600:    #484848;
  --color-gray-700:    #2c2c2c;
  --color-gray-800:    #1a1a1a;
  --color-gray-900:    #0d0d0d;

  /* ── UI 시맨틱 컬러 ──────────────────────── */
  --color-bg:          var(--color-white);
  --color-bg-subtle:   var(--color-gray-50);
  --color-bg-dark:     var(--color-gray-900);
  --color-text:        var(--color-gray-800);
  --color-text-muted:  var(--color-gray-400);
  --color-text-faint:  var(--color-gray-300);
  --color-border:      var(--color-gray-200);
  --color-border-dark: rgba(255,255,255,0.07);

  /* ── 네비게이션 ──────────────────────────── */
  --nav-bg:            rgba(0, 0, 0, 0.9);
  --nav-text:          rgba(255,255,255,0.70);
  --nav-text-hover:    var(--color-white);
  --nav-border:        rgba(255,255,255,0.07);
  --nav-cta-bg:        var(--color-cyan);
  --nav-cta-text:      var(--color-black);

  /* ── 버튼 ────────────────────────────────── */
  --btn-primary-bg:    var(--color-cyan);
  --btn-primary-text:  var(--color-black);
  --btn-ghost-border:  var(--color-cyan);
  --btn-ghost-text:    var(--color-cyan);

  /* ── 제품 A (시안) ───────────────────────── */
  --product-s-primary: var(--color-cyan);
  --product-s-dark:    var(--color-cyan-dark);
  --product-s-glow:    var(--color-cyan-glow);
  --product-s-ring:    var(--color-cyan-ring);

  /* ── 제품 B (다크 그레이) ────────────────── */
  --product-d-primary: var(--color-gray-300);
  --product-d-dark:    var(--color-gray-500);
  --product-d-glow:    rgba(194, 194, 194, 0.2);
  --product-d-ring:    rgba(194, 194, 194, 0.15);

  /* ── 타이포그래피 ────────────────────────── */
  --font-sans:    'Pretendard Variable', 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: 'Pretendard Variable', 'Pretendard', sans-serif;

  /* ── 레이아웃 ────────────────────────────── */
  --nav-h:      52px;
  /* --container:  980px; */
  --container:  1200px;
  --radius-sm:  10px;
  --radius-md:  16px;
  --radius-lg:  24px;
  --radius-xl:  32px;

  /* ── 트랜지션 ────────────────────────────── */
  --ease:       cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --transition: 0.35s var(--ease);
}