/* =====================================================================
   NICE정보통신 (NICE Information & Telecommunication) — Design Tokens
   Foundation: NICE Group CI (2018+). Primary = NICE Navy + White,
   secondary accents = NICE Blue / Cyan / Violet, achromatic neutrals.
   ===================================================================== */

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

:root {
  /* ---------- Brand ---------- */
  --nice-navy:        #002555; /* Pantone 295C — primary brand, "NICE Navy" */
  --nice-navy-ink:    #001A3D; /* deepest, for text-on-light brand emphasis */
  --nice-white:       #FFFFFF; /* "NICE White" */

  /* ---------- Blue ramp (navy → sky) ---------- */
  --blue-50:  #EAF1FF;
  --blue-100: #D6E4FF;
  --blue-200: #ADC8FF;
  --blue-300: #84ABFF;
  --blue-400: #5294FF; /* Pantone 284 — "NICE Sky", secondary accent */
  --blue-500: #2B6FFF; /* digital primary (interactive) */
  --blue-600: #1F5AE0;
  --blue-700: #173FA8;
  --blue-800: #0E2C78;
  --blue-900: #002555; /* = NICE Navy */

  /* ---------- Secondary accents (≈10% usage) ---------- */
  --cyan:   #11BBD1; /* Pantone 3115 */
  --violet: #7C70FF; /* Pantone 2725 */
  --sky:    #5294FF; /* Pantone 284 */

  /* ---------- Neutrals (cool grayscale, tuned to navy) ---------- */
  --gray-0:   #FFFFFF;
  --gray-50:  #F6F8FB;
  --gray-100: #EDF1F6;
  --gray-200: #DDE3EC;
  --gray-300: #C5CEDA;
  --gray-400: #9AA6B6;
  --gray-500: #6B7889;
  --gray-600: #4C5868;
  --gray-700: #36404E;
  --gray-800: #232C38;
  --gray-900: #121821;

  /* ---------- Semantic status ---------- */
  --success:    #1A9E5C;
  --success-bg: #E6F6EE;
  --warning:    #E8A317;
  --warning-bg: #FDF3DE;
  --danger:     #E14B4B;
  --danger-bg:  #FCEAEA;
  --info:       #2B6FFF;
  --info-bg:    #EAF1FF;

  /* ---------- Semantic roles ---------- */
  --brand:          var(--nice-navy);
  --primary:        var(--blue-500);
  --primary-hover:  var(--blue-600);
  --primary-active: var(--blue-700);
  --primary-subtle: var(--blue-50);

  --bg:        #FFFFFF;
  --bg-subtle: #F6F8FB;
  --bg-muted:  #EDF1F6;
  --bg-brand:  var(--nice-navy);
  --surface:   #FFFFFF;

  --fg1:        #121821; /* primary text */
  --fg2:        #4C5868; /* secondary text */
  --fg3:        #6B7889; /* muted / captions */
  --fg-onbrand: #FFFFFF; /* text on navy / blue */
  --fg-link:    var(--blue-600);

  --border:        #DDE3EC;
  --border-strong: #C5CEDA;
  --ring:          rgba(43, 111, 255, 0.35);

  /* ---------- Radii ---------- */
  --r-xs:   4px;
  --r-sm:   6px;
  --r-md:   8px;
  --r-lg:   12px;
  --r-xl:   16px;
  --r-2xl:  24px;
  --r-full: 999px;

  /* ---------- Spacing (4px base) ---------- */
  --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;

  /* ---------- Elevation ---------- */
  --shadow-xs:    0 1px 2px rgba(16, 24, 33, 0.06);
  --shadow-sm:    0 1px 3px rgba(16, 24, 33, 0.08), 0 1px 2px rgba(16, 24, 33, 0.04);
  --shadow-md:    0 4px 12px rgba(16, 24, 33, 0.08);
  --shadow-lg:    0 12px 32px rgba(16, 24, 33, 0.12);
  --shadow-xl:    0 24px 56px rgba(2, 18, 48, 0.16);
  --shadow-focus: 0 0 0 3px var(--ring);

  /* ---------- Typography ---------- */
  --font-sans: "Pretendard Variable", "Pretendard", -apple-system, BlinkMacSystemFont,
               "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  --font-mono: "SFMono-Regular", "JetBrains Mono", "D2Coding", ui-monospace, Menlo, monospace;

  /* font sizes */
  --text-display: 56px;
  --text-h1:      40px;
  --text-h2:      30px;
  --text-h3:      24px;
  --text-h4:      20px;
  --text-lg:      18px;
  --text-body:    16px;
  --text-sm:      14px;
  --text-xs:      12px;

  /* weights */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* line-heights */
  --lh-tight:   1.15;
  --lh-snug:    1.3;
  --lh-normal:  1.5;
  --lh-relaxed: 1.7;

  /* tracking */
  --tracking-tight:  -0.02em;
  --tracking-normal: -0.01em;
  --tracking-wide:    0.04em;
}

/* =====================================================================
   Semantic type styles — use as classes or copy into element rules.
   Korean display/heading text is tight & semibold; body is relaxed.
   ===================================================================== */
.nice-display {
  font-family: var(--font-sans);
  font-size: var(--text-display);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg1);
}
.nice-h1 {
  font-family: var(--font-sans);
  font-size: var(--text-h1);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg1);
}
.nice-h2 {
  font-family: var(--font-sans);
  font-size: var(--text-h2);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-normal);
  color: var(--fg1);
}
.nice-h3 {
  font-family: var(--font-sans);
  font-size: var(--text-h3);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-normal);
  color: var(--fg1);
}
.nice-h4 {
  font-family: var(--font-sans);
  font-size: var(--text-h4);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--fg1);
}
.nice-lead {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  font-weight: var(--fw-regular);
  line-height: var(--lh-relaxed);
  color: var(--fg2);
}
.nice-body {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  color: var(--fg1);
}
.nice-sm {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  color: var(--fg2);
}
.nice-caption {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  line-height: var(--lh-normal);
  letter-spacing: var(--tracking-wide);
  color: var(--fg3);
}
.nice-overline {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  line-height: 1;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--primary);
}
.nice-mono {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  color: var(--fg1);
}
.nice-num {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}