/* ==========================================================================
   NSNTEK — Design Tokens
   색상 · 타이포 · 간격 · 모서리 · 그림자 · 모션
   ========================================================================== */

:root {
  /* --- Brand: Navy --- */
  --navy-900: #0a1a2f;
  --navy-800: #0d2238;
  --navy-700: #11294a;
  --navy-600: #163457;
  --navy-500: #1d4374;

  /* --- Brand: Precision Blue --- */
  --blue-700: #0a4ec2;
  --blue-600: #0b5be0;
  --blue-500: #1a6dff;
  --blue-400: #4d8dff;
  --blue-300: #82b0ff;

  /* --- Accent: Cyan --- */
  --cyan-500: #00aab8;
  --cyan-400: #00c2d1;
  --cyan-300: #3dd8e4;

  /* --- Neutral / Ink --- */
  --ink: #0b0f19;
  --ink-soft: #1b2433;
  --gray-700: #3a4658;
  --gray-600: #515f73;
  --gray-500: #6b7785;
  --gray-400: #95a0ae;
  --gray-300: #c7ced7;
  --gray-200: #e3e8ef;
  --gray-100: #f0f3f7;
  --bg-soft: #f5f7fa;
  --bg-softer: #fafbfc;
  --white: #ffffff;

  /* --- Semantic --- */
  --color-text: var(--ink);
  --color-text-muted: var(--gray-500);
  --color-text-invert: var(--white);
  --color-bg: var(--white);
  --color-bg-alt: var(--bg-soft);
  --color-accent: var(--blue-500);
  --color-accent-strong: var(--blue-600);
  --color-line: var(--gray-200);
  --color-line-strong: var(--gray-300);

  /* --- Gradients --- */
  --grad-brand: linear-gradient(135deg, var(--navy-800) 0%, var(--navy-600) 45%, var(--blue-600) 100%);
  --grad-accent: linear-gradient(120deg, var(--blue-500) 0%, var(--cyan-400) 100%);
  --grad-hero: radial-gradient(120% 120% at 80% 0%, var(--navy-600) 0%, var(--navy-900) 55%);
  --grad-soft: linear-gradient(180deg, var(--white) 0%, var(--bg-soft) 100%);

  /* --- Typography --- */
  --font-sans: "Pretendard Variable", "Pretendard", -apple-system, BlinkMacSystemFont,
    "Apple SD Gothic Neo", "Segoe UI", Roboto, "Helvetica Neue", system-ui, sans-serif;

  --fs-display: clamp(2.75rem, 1.4rem + 5.4vw, 5.5rem);   /* 44 → 88 */
  --fs-h1: clamp(2rem, 1.2rem + 3.2vw, 3.5rem);           /* 32 → 56 */
  --fs-h2: clamp(1.65rem, 1.1rem + 2.2vw, 2.75rem);       /* 26 → 44 */
  --fs-h3: clamp(1.25rem, 1rem + 1vw, 1.6rem);            /* 20 → 26 */
  --fs-h4: clamp(1.1rem, 1rem + 0.5vw, 1.3rem);           /* 18 → 21 */
  --fs-lead: clamp(1.05rem, 0.95rem + 0.6vw, 1.3rem);     /* 17 → 21 */
  --fs-body: 1rem;        /* 16 */
  --fs-sm: 0.9375rem;     /* 15 */
  --fs-caption: 0.8125rem;/* 13 */
  --fs-eyebrow: 1.0625rem;  /* 17 — 섹션 상단 라벨(숫자로 보는 엔에스엔텍 등) */

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

  --lh-tight: 1.1;
  --lh-snug: 1.25;
  --lh-normal: 1.6;

  /* --- Spacing (8px base) --- */
  --space-1: 0.5rem;   /* 8 */
  --space-2: 1rem;     /* 16 */
  --space-3: 1.5rem;   /* 24 */
  --space-4: 2rem;     /* 32 */
  --space-5: 3rem;     /* 48 */
  --space-6: 4rem;     /* 64 */
  --space-7: 6rem;     /* 96 */
  --space-8: 8rem;     /* 128 */
  --section-y: clamp(4rem, 2rem + 8vw, 8rem);

  /* --- Layout --- */
  --container: 1200px;
  --container-narrow: 880px;
  --gutter: clamp(1.25rem, 0.5rem + 3vw, 2.5rem);
  --header-h: 76px;

  /* --- Radius --- */
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-full: 999px;

  /* --- Shadows --- */
  --shadow-xs: 0 1px 2px rgba(11, 15, 25, 0.06);
  --shadow-sm: 0 2px 8px rgba(11, 15, 25, 0.06);
  --shadow: 0 10px 30px rgba(11, 15, 25, 0.08);
  --shadow-lg: 0 24px 60px rgba(11, 15, 25, 0.12);
  --shadow-blue: 0 16px 40px rgba(26, 109, 255, 0.28);

  /* --- Motion --- */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 0.2s;
  --dur: 0.45s;
  --dur-slow: 0.7s;

  /* --- z-index --- */
  --z-header: 100;
  --z-drawer: 200;
  --z-top: 300;
}