/* ============================================================
   NODE — Design tokens (light + dark)
   All colors defined via oklch. All values auto-flip on [data-theme].
   ============================================================ */

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

/* ---------- Root / shared ---------- */
:root {
  /* Type scale — fixed */
  --fs-display: 44px;
  --fs-h1: 32px;
  --fs-h2: 24px;
  --fs-h3: 20px;
  --fs-body: 16px;
  --fs-caption: 13px;
  --fs-micro: 11px;

  --lh-tight: 1.22;
  --lh-title: 1.32;
  --lh-body: 1.65;

  --ls-display: -0.02em;
  --ls-title: -0.015em;
  --ls-body: -0.005em;
  --ls-en: 0.02em;      /* for NODE wordmark */

  --ff-sans: 'Pretendard Variable', Pretendard, -apple-system, 'Apple SD Gothic Neo', system-ui, sans-serif;
  --ff-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Spacing scale (4px base) */
  --sp-0: 0;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 40px;
  --sp-9: 48px;
  --sp-10: 64px;
  --sp-11: 80px;
  --sp-12: 120px;

  /* Radii */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-pill: 999px;

  /* Layout */
  --max-w: 1080px;
  --max-w-narrow: 760px;

  /* Motion */
  --ease: cubic-bezier(.2, .6, .2, 1);
  --t-fast: 120ms;
  --t-med: 220ms;

  /* Category accent hues (oklch L/C fixed; only h varies) — shared between themes */
  --cat-news-h: 295;       /* 뉴스해설 — purple */
  --cat-note-h: 248;       /* 판례분석 — deep blue */
  --cat-field-h: 155;      /* 실무가이드 — green */
  --cat-trend-h: 80;       /* HR트렌드 — gold/amber */
  --cat-ai-h: 38;          /* AI×HR — orange */
  --cat-daily-h: 200;      /* 데일리브리핑 — cyan blue */
}

/* ---------- DARK (default) ---------- */
:root,
[data-theme='dark'] {
  color-scheme: dark;

  /* Surfaces — subtly cool neutral, not pure black */
  --bg-0: oklch(0.16 0.008 250);      /* page */
  --bg-1: oklch(0.19 0.008 250);      /* card */
  --bg-2: oklch(0.22 0.008 250);      /* raised */
  --bg-elev: oklch(0.25 0.010 250);   /* floating */

  /* Text */
  --fg-0: oklch(0.98 0.004 250);      /* primary — 15.2:1 on bg-0 */
  --fg-1: oklch(0.82 0.008 250);      /* body — 9.1:1 */
  --fg-2: oklch(0.65 0.010 250);      /* muted — 5.1:1 */
  --fg-3: oklch(0.48 0.012 250);      /* tertiary — 3.0:1  (use on large text only) */

  /* Borders */
  --bd-1: oklch(0.28 0.010 250);
  --bd-2: oklch(0.34 0.012 250);
  --bd-strong: oklch(0.46 0.014 250);

  /* Primary — Toss-leaning blue */
  --pr-h: 245;
  --pr-c: 0.18;
  --pr: oklch(0.64 var(--pr-c) var(--pr-h));
  --pr-hover: oklch(0.70 var(--pr-c) var(--pr-h));
  --pr-soft: oklch(0.30 0.08 var(--pr-h));       /* bg for subtle chips */
  --pr-on: oklch(0.99 0 0);                      /* text on primary */
  --pr-ring: oklch(0.64 var(--pr-c) var(--pr-h) / 0.4);

  /* State */
  --ok: oklch(0.74 0.13 155);
  --warn: oklch(0.80 0.14 80);
  --err: oklch(0.68 0.19 25);

  /* Category tints — DARK */
  --cat-news-fg:  oklch(0.78 0.12 var(--cat-news-h));
  --cat-news-bg:  oklch(0.28 0.07 var(--cat-news-h));
  --cat-note-fg:  oklch(0.78 0.12 var(--cat-note-h));
  --cat-note-bg:  oklch(0.28 0.09 var(--cat-note-h));
  --cat-field-fg: oklch(0.80 0.13 var(--cat-field-h));
  --cat-field-bg: oklch(0.28 0.07 var(--cat-field-h));
  --cat-trend-fg: oklch(0.82 0.14 var(--cat-trend-h));
  --cat-trend-bg: oklch(0.30 0.08 var(--cat-trend-h));
  --cat-ai-fg:    oklch(0.82 0.14 var(--cat-ai-h));
  --cat-ai-bg:    oklch(0.30 0.08 var(--cat-ai-h));
  --cat-daily-fg: oklch(0.80 0.11 var(--cat-daily-h));
  --cat-daily-bg: oklch(0.28 0.06 var(--cat-daily-h));

  /* Shadows */
  --sh-1: 0 1px 0 oklch(0 0 0 / 0.4), 0 8px 24px oklch(0 0 0 / 0.35);
  --sh-2: 0 2px 0 oklch(0 0 0 / 0.5), 0 20px 48px oklch(0 0 0 / 0.45);
  --ring-focus: 0 0 0 3px oklch(0.64 0.18 var(--pr-h) / 0.45);
}

/* ---------- LIGHT ---------- */
[data-theme='light'] {
  color-scheme: light;

  --bg-0: oklch(0.995 0.002 250);
  --bg-1: oklch(0.975 0.003 250);
  --bg-2: oklch(0.955 0.004 250);
  --bg-elev: oklch(1 0 0);

  --fg-0: oklch(0.18 0.010 250);        /* 15.4:1 on bg-0 */
  --fg-1: oklch(0.30 0.010 250);        /* 9.8:1 */
  --fg-2: oklch(0.46 0.010 250);        /* 5.3:1 */
  --fg-3: oklch(0.60 0.012 250);        /* 3.1:1 (large only) */

  --bd-1: oklch(0.92 0.006 250);
  --bd-2: oklch(0.86 0.008 250);
  --bd-strong: oklch(0.70 0.010 250);

  /* Primary — darker in light mode to hit AA on white */
  --pr-h: 245;
  --pr-c: 0.19;
  --pr: oklch(0.50 var(--pr-c) var(--pr-h));     /* 5.9:1 on bg-0 */
  --pr-hover: oklch(0.44 var(--pr-c) var(--pr-h));
  --pr-soft: oklch(0.96 0.03 var(--pr-h));
  --pr-on: oklch(0.995 0 0);
  --pr-ring: oklch(0.50 var(--pr-c) var(--pr-h) / 0.28);

  --ok: oklch(0.48 0.15 155);
  --warn: oklch(0.58 0.17 75);
  --err: oklch(0.52 0.22 25);

  /* Category tints — LIGHT (darker fg for AA, very pale bg) */
  --cat-news-fg:  oklch(0.40 0.15 var(--cat-news-h));     /* 7.5:1 */
  --cat-news-bg:  oklch(0.965 0.025 var(--cat-news-h));
  --cat-note-fg:  oklch(0.38 0.17 var(--cat-note-h));     /* 8.1:1 */
  --cat-note-bg:  oklch(0.965 0.030 var(--cat-note-h));
  --cat-field-fg: oklch(0.40 0.14 var(--cat-field-h));    /* 6.4:1 */
  --cat-field-bg: oklch(0.965 0.030 var(--cat-field-h));
  --cat-trend-fg: oklch(0.42 0.14 var(--cat-trend-h));    /* 5.8:1 — gold needs darker */
  --cat-trend-bg: oklch(0.965 0.055 var(--cat-trend-h));
  --cat-ai-fg:    oklch(0.44 0.14 var(--cat-ai-h));       /* 5.9:1 */
  --cat-ai-bg:    oklch(0.965 0.045 var(--cat-ai-h));
  --cat-daily-fg: oklch(0.42 0.14 var(--cat-daily-h));    /* 6.0:1 */
  --cat-daily-bg: oklch(0.965 0.030 var(--cat-daily-h));

  --sh-1: 0 1px 2px oklch(0 0 0 / 0.04), 0 4px 12px oklch(0 0 0 / 0.06);
  --sh-2: 0 2px 4px oklch(0 0 0 / 0.06), 0 12px 32px oklch(0 0 0 / 0.10);
  --ring-focus: 0 0 0 3px oklch(0.50 0.19 var(--pr-h) / 0.32);
}

/* ============================================================
   Base
   ============================================================ */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--ff-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  color: var(--fg-1);
  background: var(--bg-0);
  font-feature-settings: 'ss01', 'ss02', 'tnum';
  -webkit-font-smoothing: antialiased;
  transition: background var(--t-med) var(--ease), color var(--t-med) var(--ease);
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

::selection {
  background: oklch(from var(--pr) l c h / 0.35);
  color: var(--fg-0);
}

/* Focus */
:focus-visible {
  outline: none;
  box-shadow: var(--ring-focus);
  border-radius: var(--r-sm);
}

/* Utility */
.container { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--sp-6); }
.stack > * + * { margin-top: var(--sp-4); }
.row { display: flex; align-items: center; gap: var(--sp-3); }
.mono { font-family: var(--ff-mono); letter-spacing: 0; }
.en { letter-spacing: var(--ls-en); }