/* =========================================================================
   Pulse Dashboard — Colors & Type
   Source: SaaS Dashboard (Community).fig
   Note: original Figma uses Gilroy; we substitute Pretendard per user
         request for a modern Korean-friendly sans (모던/깔끔/쎄련).
   ========================================================================= */

/* ---------- Webfonts ---------- */
@font-face {
  font-family: "Pretendard";
  font-weight: 100;
  font-style: normal;
  src: url("fonts/Pretendard-Thin.otf") format("opentype");
}
@font-face {
  font-family: "Pretendard";
  font-weight: 200;
  font-style: normal;
  src: url("fonts/Pretendard-ExtraLight.otf") format("opentype");
}
@font-face {
  font-family: "Pretendard";
  font-weight: 300;
  font-style: normal;
  src: url("fonts/Pretendard-Light.otf") format("opentype");
}
@font-face {
  font-family: "Pretendard";
  font-weight: 400;
  font-style: normal;
  src: url("fonts/Pretendard-Regular.otf") format("opentype");
}
@font-face {
  font-family: "Pretendard";
  font-weight: 500;
  font-style: normal;
  src: url("fonts/Pretendard-Medium.otf") format("opentype");
}
@font-face {
  font-family: "Pretendard";
  font-weight: 600;
  font-style: normal;
  src: url("fonts/Pretendard-SemiBold.otf") format("opentype");
}
@font-face {
  font-family: "Pretendard";
  font-weight: 700;
  font-style: normal;
  src: url("fonts/Pretendard-Bold.otf") format("opentype");
}
@font-face {
  font-family: "Pretendard";
  font-weight: 800;
  font-style: normal;
  src: url("fonts/Pretendard-ExtraBold.otf") format("opentype");
}
@font-face {
  font-family: "Pretendard";
  font-weight: 900;
  font-style: normal;
  src: url("fonts/Pretendard-Black.otf") format("opentype");
}

:root {
  /* ============ Color tokens — base palette ============ */

  /* Neutrals (ink → paper) */
  --ink-900: rgb(33, 34, 39);    /* primary ink, sidebar, dark cards */
  --ink-700: rgb(112, 123, 129); /* secondary text */
  --ink-500: rgb(143, 142, 158); /* tertiary text / labels */
  --ink-400: rgb(151, 149, 157); /* placeholder text */
  --ink-300: rgb(218, 221, 226); /* disabled bg */
  --ink-200: rgb(222, 224, 230); /* faint divider */
  --ink-150: rgb(237, 240, 246); /* tab bg, soft surface */
  --ink-100: rgb(233, 237, 247); /* card border, hairline */
  --ink-75:  rgb(242, 245, 248); /* page background */
  --ink-50:  rgb(247, 249, 252); /* lighter bg */
  --paper:   rgb(255, 255, 255); /* white surfaces */

  /* Semantic */
  --success: rgb(35, 197, 129);
  --danger:  rgb(231, 69, 69);
  --success-soft: rgb(238, 255, 245);

  /* Accent — chart / category */
  --acc-blue:    rgb(109, 172, 231);
  --acc-blue-soft: rgb(142, 209, 255);
  --acc-blue-04: rgba(94, 195, 255, 0.04);
  --acc-pink:    rgb(234, 121, 186);
  --acc-pink-soft: rgb(255, 205, 234);
  --acc-pink-04: rgba(253, 93, 239, 0.04);
  --acc-purple:    rgb(170, 122, 235);
  --acc-purple-soft: rgb(174, 143, 247);
  --acc-purple-bg:   rgb(238, 234, 248);
  --acc-peach-bg:    rgb(255, 244, 240);

  /* ============ Semantic surface tokens ============ */
  --bg-app:        var(--ink-75);
  --bg-card:       var(--paper);
  --bg-card-dark:  var(--ink-900);
  --bg-tab:        var(--ink-150);
  --bg-input:      var(--paper);

  --fg-1: var(--ink-900);   /* primary content */
  --fg-2: var(--ink-700);   /* secondary content */
  --fg-3: var(--ink-500);   /* tertiary / captions */
  --fg-placeholder: var(--ink-400);
  --fg-on-dark: var(--paper);

  --border-hair: var(--ink-100);
  --border-soft: var(--ink-200);

  /* Status text */
  --fg-success: var(--success);
  --fg-danger:  var(--danger);

  /* ============ Shape & elevation ============ */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 10px;   /* search input, notification button */
  --radius-lg: 15px;
  --radius-xl: 20px;   /* primary card radius */
  --radius-pill: 999px;

  --shadow-card:  0 1px 2px rgba(33, 34, 39, 0.04);
  --shadow-hover: 0 8px 24px rgba(33, 34, 39, 0.06);
  --shadow-pop:   0 16px 48px rgba(33, 34, 39, 0.12);

  /* ============ Spacing scale (4-base) ============ */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 30px;
  --space-8: 40px;
  --space-9: 60px;
  --space-10: 80px;

  /* ============ Typography — base ============ */
  --font-sans: "Pretendard", -apple-system, BlinkMacSystemFont,
               "Apple SD Gothic Neo", "Malgun Gothic", "Segoe UI",
               Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo,
               Consolas, monospace;

  /* Weight tokens */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Type sizes (matches Figma scale: 12 / 14 / 16 / 18 / 22 / 28 / 30 / 44 / 50) */
  --fs-xs:   12px;
  --fs-sm:   14px;
  --fs-base: 16px;
  --fs-md:   18px;
  --fs-lg:   22px;
  --fs-xl:   28px;
  --fs-2xl:  30px;
  --fs-3xl:  44px;
  --fs-4xl:  50px;

  /* Tracking */
  --tracking-tight: -0.02em;
  --tracking-snug:  -0.01em;
  --tracking-normal: 0;
  --tracking-wide:  0.02em;
}

/* ============ Semantic type styles ============ */

body {
  font-family: var(--font-sans);
  color: var(--fg-1);
  background: var(--bg-app);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.h-display,
.t-display {
  /* Hero — 44/52 bold, used as page H1 */
  font: var(--weight-bold) var(--fs-3xl) / 1.2 var(--font-sans);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  margin: 0;
}

.h1, .t-h1 {
  /* Numeric hero (in-card stat headline) — 50/100% bold */
  font: var(--weight-bold) var(--fs-4xl) / 1 var(--font-sans);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  margin: 0;
}

.h2, .t-h2 {
  /* Section title — 28/120% bold */
  font: var(--weight-bold) var(--fs-xl) / 1.2 var(--font-sans);
  letter-spacing: var(--tracking-snug);
  color: var(--fg-1);
  margin: 0;
}

.h3, .t-h3 {
  /* Card title — 22/100% bold */
  font: var(--weight-bold) var(--fs-lg) / 1 var(--font-sans);
  color: var(--fg-1);
  margin: 0;
}

.t-stat {
  /* Large stat numbers in mini KPI cards — 30/100% bold */
  font: var(--weight-bold) var(--fs-2xl) / 1 var(--font-sans);
  color: var(--fg-1);
  letter-spacing: -0.01em;
}

.t-row, .t-md {
  /* Row title / strong body — 18/120% bold */
  font: var(--weight-bold) var(--fs-md) / 1.2 var(--font-sans);
  color: var(--fg-1);
}

.t-body {
  /* Body / label — 16/120% medium */
  font: var(--weight-medium) var(--fs-base) / 1.2 var(--font-sans);
  letter-spacing: var(--tracking-snug);
  color: var(--fg-1);
}

.t-body-2 {
  /* Body subdued — 16 medium, muted */
  font: var(--weight-medium) var(--fs-base) / 1.2 var(--font-sans);
  letter-spacing: var(--tracking-snug);
  color: var(--fg-2);
}

.t-label {
  /* Tab / chip label — 14/120% bold */
  font: var(--weight-bold) var(--fs-sm) / 1.2 var(--font-sans);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}

.t-caption {
  /* Meta / helper — 14/100% regular muted */
  font: var(--weight-regular) var(--fs-sm) / 1 var(--font-sans);
  color: var(--fg-2);
}

.t-tick {
  /* Chart axis tick — 14/100% medium */
  font: var(--weight-medium) var(--fs-sm) / 1 var(--font-sans);
  color: var(--fg-3);
}

.t-mono {
  font: var(--weight-medium) var(--fs-sm) / 1.2 var(--font-mono);
  color: var(--fg-1);
}