@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.css');

:root {
  /* ---------- Color primitives ---------- */
  --neon:       #CCFF00;
  --neon-deep:  #B8E600;
  --neon-tint:  #F0FFB3;
  --neon-glow:  rgba(204, 255, 0, 0.35);
  --neon-glow-strong: rgba(204, 255, 0, 0.6);

  --ink-900: #0A0E14;
  --ink-800: #151A21;
  --ink-700: #2B3038;
  --ink-600: #4B5058;
  --ink-500: #6B7280;
  --ink-400: #9AA1AC;
  --ink-300: #C9CED6;
  --ink-200: #E0E4EA;

  --white:      #FFFFFF;
  --off-white:  #F7F9FC;
  --surface:    #FFFFFF;
  --surface-2:  #F2F4F8;

  --red:    #F04452;
  --green:  #03B26C;
  --amber:  #F59E0B;

  /* ---------- Semantic ---------- */
  --bg-page:       var(--off-white);
  --bg-card:       var(--surface);
  --bg-card-hover: var(--surface-2);
  --bg-dark:       var(--ink-900);
  --bg-dark-2:     var(--ink-800);

  --fg-primary:    var(--ink-900);
  --fg-secondary:  var(--ink-700);
  --fg-body:       var(--ink-500);
  --fg-caption:    var(--ink-400);
  --fg-on-dark:    rgba(255, 255, 255, 0.92);
  --fg-on-dark-2:  rgba(255, 255, 255, 0.7);

  --border-subtle: rgba(10, 14, 20, 0.06);
  --border-normal: rgba(10, 14, 20, 0.1);
  --border-focus:  var(--neon);

  /* ---------- Spacing (generous) ---------- */
  --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;
  --gutter:   24px;

  /* ---------- Radii ---------- */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-2xl:  28px;
  --radius-pill: 9999px;

  /* ---------- Elevation ---------- */
  --shadow-0: none;
  --shadow-1: 0 1px 2px rgba(10, 14, 20, 0.04);
  --shadow-2: 0 4px 16px rgba(10, 14, 20, 0.06);
  --shadow-3: 0 8px 32px rgba(10, 14, 20, 0.1);
  --shadow-4: 0 16px 48px rgba(10, 14, 20, 0.14);

  /* ---------- Motion ---------- */
  --ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-decel:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:   150ms;
  --dur-base:   300ms;
  --dur-slow:   500ms;

  /* ---------- Typography (premium scale) ---------- */
  --font-sans: 'Pretendard Variable', Pretendard, -apple-system,
               BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Noto Sans KR',
               'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

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

  --fs-display-hero:    clamp(44px, 6.5vw, 80px);
  --fs-display-large:   clamp(34px, 4vw, 52px);
  --fs-heading-large:   clamp(26px, 3vw, 36px);
  --fs-heading:         clamp(22px, 2.2vw, 28px);
  --fs-subtitle:        18px;
  --fs-body-large:      17px;
  --fs-body:            15px;
  --fs-body-small:      14px;
  --fs-caption:         13px;

  --lh-display-hero:    1.1;
  --lh-display-large:   1.18;
  --lh-heading-large:   1.28;
  --lh-heading:         1.34;
  --lh-subtitle:        1.5;
  --lh-body-large:      1.65;
  --lh-body:            1.65;
  --lh-body-small:      1.55;
  --lh-caption:         1.5;

  /* ---------- Layout ---------- */
  --max-width: 1200px;
  --header-height: 72px;
}