/* =============================================================
   PX맵 Design System — Tokens
   Color + Typography + Spacing + Radius + Motion
   ============================================================= */

/* ---------- Web font: Pretendard (open-source Korean sans) ---------- */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");

:root {
  /* ====== COLOR — Brand ====== */
  --primary:           #3D6B47;   /* Olive green — single accent */
  --primary-pressed:   #335B3C;   /* darker for press states */
  --primary-light:     #EBF3ED;   /* 12% tint — chip bg, light fills */
  --primary-on:        #FFFFFF;   /* foreground on primary */

  /* ====== COLOR — Surfaces ====== */
  --bg:                #F8F9FA;   /* app background */
  --surface:           #FFFFFF;   /* cards, list items, sheets */
  --surface-variant:   #F2F4F6;   /* inputs, chips (idle), thumbnails */

  /* ====== COLOR — Text ====== */
  --text-primary:      #191F28;   /* headings, body */
  --text-secondary:    #6B7684;   /* sub-text, captions, idle icons */
  --text-tertiary:     #B0B8C1;   /* placeholders, disabled */
  --text-on-primary:   #FFFFFF;

  /* ====== COLOR — Lines ====== */
  --border:            #E5E8EB;   /* dividers, default borders */
  --border-strong:     #D1D6DB;   /* hairline-emphasis */

  /* ====== COLOR — Semantic (used sparingly) ====== */
  --success:           #2EA47A;
  --warning:           #F2A93B;
  --danger:            #E5503D;
  --info:              #3182F6;

  /* ====== COLOR — Overlay ====== */
  --scrim:             rgba(0, 0, 0, 0.4);

  /* ====== TYPE — Family ====== */
  --font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
               system-ui, Roboto, "Helvetica Neue", "Apple SD Gothic Neo",
               "Noto Sans KR", sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  /* ====== TYPE — Size scale ====== */
  --text-2xs: 11px;
  --text-xs:  12px;
  --text-sm:  13px;
  --text-md:  15px;   /* body default */
  --text-lg:  17px;
  --text-xl:  19px;
  --text-2xl: 22px;
  --text-3xl: 26px;
  --text-4xl: 32px;

  /* ====== TYPE — Weights ====== */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* ====== TYPE — Line heights ====== */
  --leading-tight:   1.25;
  --leading-snug:    1.35;
  --leading-normal:  1.5;
  --leading-relaxed: 1.6;

  /* ====== SPACING — 4px grid ====== */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  32px;
  --space-8:  40px;
  --space-9:  48px;
  --space-10: 64px;

  /* ====== RADIUS ====== */
  --radius-sm:   6px;
  --radius-md:   8px;    /* inputs, chips, small buttons */
  --radius-lg:   12px;   /* cards, list items */
  --radius-xl:   14px;   /* primary CTA buttons */
  --radius-2xl:  20px;
  --radius-3xl:  24px;   /* bottom sheet top */
  --radius-pill: 999px;

  /* ====== ELEVATION (used very sparingly) ====== */
  --shadow-0: none;
  --shadow-1: 0 1px 0 0 var(--border);                       /* hairline below header */
  --shadow-up: 0 -1px 0 0 var(--border);                     /* hairline above bottom-nav */
  --shadow-sheet: 0 -8px 24px -8px rgba(0, 0, 0, 0.08);      /* bottom sheet lift */

  /* ====== MOTION ====== */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);  /* default */
  --ease-decel:  cubic-bezier(0.2, 0, 0, 1);
  --dur-fast:    160ms;
  --dur-base:    220ms;
  --dur-slow:    320ms;

  /* ====== Z-INDEX ====== */
  --z-nav: 100;
  --z-header: 110;
  --z-sheet: 200;
  --z-modal: 300;
  --z-toast: 400;
}

/* =============================================================
   SEMANTIC TYPE STYLES (apply to elements directly)
   ============================================================= */
html, body {
  font-family: var(--font-sans);
  font-feature-settings: "ss02", "ss03", "tnum";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--text-primary);
  background: var(--bg);
}

/* Display — splash, hero numbers */
.t-display {
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);
  font-weight: var(--weight-bold);
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

/* H1 — screen title */
.t-h1 {
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
  font-weight: var(--weight-bold);
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

/* H2 — section header */
.t-h2 {
  font-size: var(--text-2xl);
  line-height: var(--leading-tight);
  font-weight: var(--weight-bold);
  letter-spacing: -0.015em;
  color: var(--text-primary);
}

/* H3 — card title */
.t-h3 {
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.01em;
  color: var(--text-primary);
}

/* Subtitle — emphasis above body */
.t-subtitle {
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}

/* Body — default */
.t-body {
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  font-weight: var(--weight-regular);
  color: var(--text-primary);
}

/* Body strong */
.t-body-strong {
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}

/* Sub — supporting copy / secondary list line */
.t-sub {
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  font-weight: var(--weight-regular);
  color: var(--text-secondary);
}

/* Caption — meta info, timestamps */
.t-caption {
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
  font-weight: var(--weight-regular);
  color: var(--text-secondary);
}

/* Overline — small labels, all caps OFF (we don't use caps) */
.t-overline {
  font-size: var(--text-2xs);
  line-height: var(--leading-snug);
  font-weight: var(--weight-medium);
  color: var(--text-tertiary);
}

/* Button label */
.t-button {
  font-size: var(--text-md);
  line-height: 1.2;
  font-weight: var(--weight-semibold);
  letter-spacing: -0.01em;
}

/* Mono — for prices, codes if needed */
.t-mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}