/* =========================================================
   design-tokens.css  —  Jumpy 스타일 토큰 & 베이스 컴포넌트
   팔레트(HEX):  #8EEAD2  #3F6453  #F2833B  #A7CC42  #F2FC66
   ========================================================= */

/* ---------- 1) Color Tokens (Light) ---------- */
:root{
  /* Brand palette (HEX) */
  --mint:    #8EEAD2; /* 민트(액센트) */
  --ever:    #3F6453; /* 에버그린(Primary) */
  --orange:  #F2833B; /* CTA */
  --lime:    #A7CC42; /* 성공/포지티브 */
  --lemon:   #F2FC66; /* 하이라이트 */

  /* Neutrals */
  --white:   #FFFFFF;
  --black:   #0B0F0D;
  --gray-900:#111827;
  --gray-800:#1F2937;
  --gray-700:#374151;
  --gray-600:#4B5563;
  --gray-500:#6B7280;
  --gray-300:#D1D5DB;
  --gray-200:#E5E7EB;
  --gray-100:#F3F4F6;
  --gray-50: #F9FAFB;

  /* Semantic (Light) */
  --background:           var(--white);
  --foreground:           var(--gray-800);
  --surface:              var(--white);
  --surface-2:            var(--gray-50);
  --muted:                var(--gray-100);
  --muted-foreground:     var(--gray-600);
  --border:               var(--gray-200);
  --ring:                 var(--ever);

  --primary:              var(--ever);
  --primary-foreground:   var(--white);

  --accent:               var(--mint);
  --accent-foreground:    #0E2C24;

  --cta:                  var(--orange);
  --cta-foreground:       var(--white);

  --success:              var(--lime);
  --success-foreground:   #0F2A06;

  --warning:              var(--orange);
  --warning-foreground:   #2B1608;

  --note:                 var(--lemon);
  --note-foreground:      #202209;

  /* Layout tokens */
  --container-max: 1120px;
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;

  --shadow-sm: 0 6px 16px rgba(0,0,0,.06);
  --shadow-card: 0 14px 34px rgba(0,0,0,.10);
  --shadow-lg: 0 28px 60px rgba(0,0,0,.18);

  --dur-150: 150ms; --dur-200: 200ms; --dur-300: 300ms;
  --ease: cubic-bezier(.16,1,.3,1);

  /* Typography scale */
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans KR", "Apple SD Gothic Neo", "Helvetica Neue", Arial, "Apple Color Emoji","Segoe UI Emoji";
  --leading-tight: 1.15;
  --leading-normal: 1.6;

  /* Gradients (예: 히어로/카드 강조) */
  --grad-hero: linear-gradient(180deg, rgba(142,234,210,.16), rgba(242,252,102,.10) 60%, rgba(255,255,255,0) 100%);
  --grad-card: linear-gradient(145deg, color-mix(in srgb, var(--accent) 30%, white), color-mix(in srgb, var(--note) 24%, white));
}

/* ---------- 2) Dark Theme (원하면 html 또는 body에 .dark 추가) ---------- */
.dark{
  --background:           #0E1412;
  --foreground:           #E8ECEA;
  --surface:              #101A16;
  --surface-2:            #0E1713;
  --muted:                #12201B;
  --muted-foreground:     #9FB2AA;
  --border:               #1E3028;
  --ring:                 var(--mint);

  --primary:              var(--mint);
  --primary-foreground:   #06211B;

  --accent:               #74DCC3;
  --accent-foreground:    #051814;

  --cta:                  #FFA267;
  --cta-foreground:       #2B1608;

  --success:              #9FE152;
  --success-foreground:   #0F2A06;

  --note:                 #EBF96B;
  --note-foreground:      #1A1E06;

  --shadow-sm: 0 6px 16px rgba(0,0,0,.35);
  --shadow-card: 0 14px 36px rgba(0,0,0,.45);
  --shadow-lg: 0 28px 70px rgba(0,0,0,.6);
}

/* ---------- 3) Base & Helpers ---------- */
*{ box-sizing:border-box }
html,body{ background:var(--background); color:var(--foreground); font-family:var(--font-sans); }
.container{ max-width:var(--container-max); margin-inline:auto; padding-inline:16px; }
.section{ padding-block: 96px; }
.section-tight{ padding-block: 64px; }

.muted{ color:var(--muted-foreground); }
.surface{ background:var(--surface); }
.surface-2{ background:var(--surface-2); }
.border{ border:1px solid var(--border); }
.ring{ outline:2px solid var(--ring); outline-offset:2px; }

.radius-sm{ border-radius:var(--radius-sm) }
.radius-md{ border-radius:var(--radius-md) }
.radius-lg{ border-radius:var(--radius-lg) }
.radius-xl{ border-radius:var(--radius-xl) }

.shadow-sm{ box-shadow:var(--shadow-sm) }
.shadow-card{ box-shadow:var(--shadow-card) }
.shadow-lg{ box-shadow:var(--shadow-lg) }

.display-1{ font-weight:900; font-size: clamp(40px, 8vw, 80px); line-height: var(--leading-tight); letter-spacing:-.02em }
.h1{ font-weight:800; font-size: clamp(32px, 5.2vw, 48px); line-height: var(--leading-tight); }
.h2{ font-weight:800; font-size: clamp(24px, 3.6vw, 36px); line-height: 1.2; }
.lead{ font-size: clamp(16px, 1.6vw, 20px); color:var(--muted-foreground); line-height: var(--leading-normal) }

/* ---------- 4) Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px; padding:12px 18px; border-radius:14px; font-weight:700;
  transition: transform var(--dur-150) var(--ease), filter var(--dur-150) var(--ease);
  will-change: transform, filter; text-decoration:none;
}
.btn:active{ transform: translateY(1px) }
.btn-primary{ background:var(--primary); color:var(--primary-foreground); }
.btn-primary:hover{ filter:brightness(.95) }
.btn-cta{ background:var(--cta); color:var(--cta-foreground); }
.btn-cta:hover{ filter:brightness(.95) }
.btn-ghost{ background:transparent; color:var(--foreground); border:1px solid var(--border) }
.btn-ghost:hover{ background:color-mix(in srgb, var(--foreground) 6%, transparent) }

/* ---------- 5) Cards / Badges ---------- */
.card{
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-card);
  padding:24px;
}
.card--hero{ background:var(--grad-card); }
.badge{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 10px; border-radius:999px; font-weight:700; font-size:12px;
  border:1px solid var(--border); background:var(--surface-2);
}
.badge--accent{ background: var(--accent); color: var(--accent-foreground); border-color: transparent }
.badge--note{ background: var(--note); color: var(--note-foreground); border-color: transparent }

/* ---------- 6) Inputs ---------- */
.input{
  width:100%; padding:12px 14px; border-radius:12px;
  border:1px solid var(--border); background:var(--surface); color:var(--foreground);
  outline:none; transition:border-color var(--dur-150) var(--ease), box-shadow var(--dur-150) var(--ease);
}
.input:focus{ border-color:var(--ring); box-shadow:0 0 0 3px color-mix(in srgb, var(--ring) 20%, transparent) }

/* ---------- 7) Color Utility (배경/텍스트) ---------- */
.bg-primary{ background:var(--primary) !important; color:var(--primary-foreground) !important; }
.bg-accent{ background:var(--accent) !important; color:var(--accent-foreground) !important; }
.bg-cta{ background:var(--cta) !important; color:var(--cta-foreground) !important; }
.bg-success{ background:var(--success) !important; color:var(--success-foreground) !important; }
.bg-note{ background:var(--note) !important; color:var(--note-foreground) !important; }

.text-foreground{ color:var(--foreground) !important }
.text-muted{ color:var(--muted-foreground) !important }
.text-primary{ color:var(--primary) !important }

/* ---------- 8) Sections you showed (간단 프리셋) ---------- */
/* 히어로 왼쪽 타이틀의 초록 하이라이트용 */
.highlight{ color: var(--primary); }
.highlight-alt{ color: var(--lime); }

/* 데모 카드 그리드 (3열 → 반응형) */
.grid-cards{
  display:grid; gap:18px; grid-template-columns: repeat(3, minmax(0,1fr));
}
@media (max-width: 1024px){ .grid-cards{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 640px){ .grid-cards{ grid-template-columns: 1fr; } }

/* 우측 인덱스 칩 */
.index-chip{
  display:flex; align-items:center; gap:8px; padding:8px 12px;
  background:var(--surface); border:1px solid var(--border); border-radius:14px;
}

/* 둥근 사각형 데코 보드 (노랑 라이트) */
.board{
  background: var(--note);
  border-radius: 28px; border: 2px solid color-mix(in srgb, var(--foreground) 8%, transparent);
  box-shadow: var(--shadow-card);
}