/* ==========================================================================
   Salaire+ — Design Tokens v2  (Z-gen benchmarked)
   ----------------------------------------------------------------------------
   재구성.md (line 66-67): "Z세대 트렌드인가" 자가 검증 후 재구성.
   벤치마크: Spotify Wrapped · Linear · Vercel · Arc · Stripe · Discord · Notion · Apple
   결과: dark-first, bold sans, electric gradient, bento card, pill UI.
   philosophy(현대미술 / 보는이가 채운다)는 유지 — 다크 캔버스 + 그라디언트 빛으로 번역.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600;700;800;900&family=Instrument+Serif:ital@0;1&family=JetBrains+Mono:wght@400;500;700&display=swap');
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');

:root {
  /* ---- Dark canvas (default — Linear/Discord 표준) ---- */
  --bg:           #08080C;
  --bg-lift:      #11111A;
  --bg-card:      #16161F;
  --bg-card-2:    #1B1B27;
  --bg-glass:     rgba(22, 22, 31, 0.72);

  /* ---- Foreground ---- */
  --fg:           #F4F4F8;
  --fg-2:         #B8B8C8;
  --fg-muted:     #6E6E80;
  --rule:         #25252F;
  --rule-soft:    #1A1A23;

  /* ---- Electric signals ---- */
  --neon-pink:    #FF3D7F;
  --neon-orange:  #FF8A3D;
  --neon-yellow:  #FFD93D;
  --neon-violet:  #8B5CF6;
  --neon-indigo:  #6366F1;
  --neon-cyan:    #22D3EE;
  --neon-lime:    #C8FF3D;
  --neon-mint:    #10B981;

  /* ---- Signature gradients (Spotify Wrapped + Vercel) ---- */
  --grad-sunset:  linear-gradient(135deg, #FF3D7F 0%, #FF8A3D 50%, #FFD93D 100%);
  --grad-violet:  linear-gradient(135deg, #6366F1 0%, #8B5CF6 50%, #EC4899 100%);
  --grad-mint:    linear-gradient(135deg, #10B981 0%, #22D3EE 100%);
  --grad-ember:   linear-gradient(135deg, #FF3D7F 0%, #6366F1 100%);
  --grad-mesh:    radial-gradient(at 20% 20%, rgba(139,92,246,0.18), transparent 50%),
                  radial-gradient(at 80% 30%, rgba(255,61,127,0.16), transparent 50%),
                  radial-gradient(at 60% 80%, rgba(34,211,238,0.10), transparent 50%);

  /* ---- Semantic ---- */
  --accent:       var(--neon-pink);
  --accent-2:     var(--neon-violet);
  --accent-cool:  var(--neon-cyan);
  --accent-pop:   var(--neon-lime);
  --highlight:    var(--neon-yellow);

  /* ---- Type families (Z stack) ---- */
  --display: "Space Grotesk", "Inter", -apple-system, system-ui, sans-serif;
  --sans:    "Inter", "Pretendard", -apple-system, BlinkMacSystemFont, sans-serif;
  --kr:      "Pretendard", "Inter", -apple-system, sans-serif;
  --serif:   "Instrument Serif", "Cormorant Garamond", Georgia, serif;  /* accent only */
  --mono:    "JetBrains Mono", "Space Grotesk", ui-monospace, "SF Mono", monospace;

  /* ---- Type scale (bigger, bolder — Z prefers tightly packed weight) ---- */
  --fs-mega:    clamp(4rem, 14vw, 11rem);
  --fs-display: clamp(2.75rem, 8vw, 6rem);
  --fs-h1:      clamp(2.25rem, 5vw, 4rem);
  --fs-h2:      clamp(1.625rem, 3.4vw, 2.5rem);
  --fs-h3:      1.375rem;
  --fs-body:    1.0625rem;
  --fs-small:   0.9375rem;
  --fs-meta:    0.75rem;

  --lh-display: 0.95;
  --lh-heading: 1.1;
  --lh-body:    1.65;
  --lh-meta:    1.4;

  --ls-tight:   -0.04em;
  --ls-tighter: -0.06em;
  --ls-body:    -0.01em;
  --ls-meta:    0.04em;

  /* ---- Spacing ---- */
  --sp-1:  4px;  --sp-2:  8px;  --sp-3:  12px; --sp-4:  16px;
  --sp-5:  24px; --sp-6:  32px; --sp-7:  48px; --sp-8:  64px;
  --sp-9:  96px; --sp-10: 128px; --sp-11: 192px; --sp-12: 256px;

  /* ---- Layout widths ---- */
  --measure-tight:  640px;
  --measure-read:   720px;
  --measure-wide:   1080px;
  --measure-fluid:  1280px;

  /* ---- Radii (Z prefers soft pills + rounded cards) ---- */
  --r-sm:   8px;
  --r-md:   16px;
  --r-lg:   24px;
  --r-xl:   32px;
  --r-pill: 999px;

  /* ---- Motion ---- */
  --ease:      cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-back: cubic-bezier(0.34, 1.4, 0.64, 1);
  --ease-snap: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:  180ms;
  --dur:       360ms;
  --dur-slow:  680ms;

  /* ---- Glow / shadow (Z light) ---- */
  --shadow-soft:  0 1px 0 rgba(255,255,255,0.04) inset, 0 8px 24px -8px rgba(0,0,0,0.6);
  --shadow-glow:  0 0 0 1px rgba(255,255,255,0.06) inset, 0 12px 40px -12px rgba(255,61,127,0.25);
  --shadow-card:  0 1px 0 rgba(255,255,255,0.04) inset, 0 24px 60px -24px rgba(0,0,0,0.7);
  --ring-pink:    0 0 0 1px rgba(255,61,127,0.4), 0 8px 32px -8px rgba(255,61,127,0.4);
  --ring-violet:  0 0 0 1px rgba(139,92,246,0.4), 0 8px 32px -8px rgba(139,92,246,0.4);

  /* ---- Z-index ---- */
  --z-dock: 50;
  --z-subheader: 40;
  --z-modal: 80;
  --z-toast: 90;

  /* ---- Sticky header heights (v11.0 단위 🅰️ — sub-header 스택용) ---- */
  --dock-h:      63px;   /* .dock 패딩 12+38(logo)+12 + border 1 = 63 */
  --subheader-h: 57px;   /* .sub-header 패딩 12+chip(32)+12 + border 1 = 57 */
}

/* ---- Light mode (옵셔널 — 낮 시간대 대비) ---- */
:root[data-theme="light"] {
  --bg:        #F7F7FA;
  --bg-lift:   #FFFFFF;
  --bg-card:   #FFFFFF;
  --bg-card-2: #F0F0F4;
  --bg-glass:  rgba(255, 255, 255, 0.78);
  --fg:        #0A0A12;
  --fg-2:      #3D3D4F;
  --fg-muted:  #84849A;
  --rule:      #E5E5EC;
  --rule-soft: #F0F0F4;
  --shadow-soft: 0 1px 2px rgba(10,10,18,0.04), 0 8px 24px -8px rgba(10,10,18,0.08);
  --shadow-card: 0 1px 0 rgba(0,0,0,0.02) inset, 0 16px 48px -16px rgba(10,10,18,0.18);
  --grad-mesh: radial-gradient(at 20% 20%, rgba(139,92,246,0.10), transparent 50%),
               radial-gradient(at 80% 30%, rgba(255,61,127,0.08), transparent 50%);
}