/* ============================================================
   VIBEFIRE — Design Tokens
   Dark base + fire glow. Jalnan display / Pretendard body.
   ============================================================ */

/* ---- Fonts ---- */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css");
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&family=Black+Han+Sans&display=swap");

@font-face {
  font-family: "Jalnan";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_four@1.2/JalnanOTF00.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- Brand color ---- */
  --fire: #FF4500;          /* primary — CTA, logo FIRE, active, progress */
  --fire-600: #E63E00;
  --fire-300: #FF7A45;
  --amber: #FFB200;         /* secondary — flame gradient, accents */
  --amber-300: #FFC94D;
  --ember-green: #36D399;   /* free / success only */
  --ember-green-dim: #1d3b30;

  --fire-grad: linear-gradient(135deg, #FF4500 0%, #FFB200 100%);
  --fire-grad-soft: linear-gradient(135deg, rgba(255,69,0,.16) 0%, rgba(255,178,0,.10) 100%);

  /* ---- Surfaces (dark) ---- */
  --bg: #0a0a0a;
  --bg-deep: #060606;
  --surface-1: #131418;
  --surface-2: #181A1F;
  --surface-3: #1F2127;
  --surface-hover: #23262D;
  --inactive: #2A2D33;

  /* ---- Text ---- */
  --text: #FFFFFF;
  --text-soft: #D8D8DC;
  --muted: #9A9A9A;
  --muted-2: #6E6E73;
  --on-fire: #1a0900;       /* text on fire fills */

  /* ---- Lines / strokes ---- */
  --line: rgba(255,255,255,0.08);
  --line-2: rgba(255,255,255,0.14);
  --line-fire: rgba(255,69,0,0.35);

  /* ---- Typography ---- */
  --font-display: "Jalnan", "Black Han Sans", "Pretendard", sans-serif;
  --font-body: "Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --fs-display-1: clamp(44px, 7.5vw, 104px);
  --fs-display-2: clamp(34px, 5vw, 64px);
  --fs-h1: clamp(30px, 3.4vw, 46px);
  --fs-h2: clamp(25px, 2.6vw, 34px);
  --fs-h3: clamp(20px, 1.7vw, 24px);
  --fs-lead: clamp(17px, 1.4vw, 21px);
  --fs-body: 16px;
  --fs-sm: 14px;
  --fs-xs: 12.5px;

  --lh-tight: 1.08;
  --lh-snug: 1.28;
  --lh-body: 1.72;

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

  /* ---- Radius ---- */
  --r-xs: 6px; --r-sm: 10px; --r-md: 14px; --r-lg: 20px;
  --r-xl: 28px; --r-2xl: 36px; --r-pill: 999px;

  /* ---- Shadow / glow ---- */
  --sh-1: 0 1px 2px rgba(0,0,0,.4);
  --sh-2: 0 8px 24px rgba(0,0,0,.45);
  --sh-3: 0 24px 64px rgba(0,0,0,.55);
  --glow-fire: 0 0 0 1px rgba(255,69,0,.30), 0 14px 40px rgba(255,69,0,.30);
  --glow-fire-strong: 0 0 0 1px rgba(255,69,0,.45), 0 18px 60px rgba(255,69,0,.45);
  --glow-soft: 0 10px 50px rgba(255,120,40,.14);

  /* ---- Layout ---- */
  --maxw: 1200px;
  --maxw-wide: 1320px;
  --maxw-text: 720px;
  --header-h: 68px;

  /* ---- Motion ---- */
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --dur-1: .18s;
  --dur-2: .32s;
  --dur-3: .55s;
}