/* ============================================================
   WEALTH GUIDE DESIGN SYSTEM — design-tokens.css
   Single source of truth for colors, type, spacing, borders.
   pfai_web_common 의 공유 자산 — 홈/testbed/admin 모두 본 파일을 첫 stylesheet 로 import 한다.
   본 파일은 이전 `crates/pfai_test_web/static/css/colors_and_type.css` 의 본문을
   `/static-common/fonts/` 경로로 이전한 결과이며 토큰 정의는 byte-identical 보존된다.
   ============================================================ */

/* ---------- Fonts ---------- */

/* Paperlogy — 한국어 본문/헤드라인 메인 폰트 (OFL 무료, 9개 가중치)
   pfai_web 2025 버전과 동일한 폰트셋. 로컬 TTF 번들 — 망분리 환경 대응. */
@font-face { font-family: 'Paperlogy'; src: url('/static-common/fonts/Paperlogy-1Thin.ttf') format('truetype'); font-weight: 100; font-style: normal; font-display: swap; }
@font-face { font-family: 'Paperlogy'; src: url('/static-common/fonts/Paperlogy-2ExtraLight.ttf') format('truetype'); font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: 'Paperlogy'; src: url('/static-common/fonts/Paperlogy-3Light.ttf') format('truetype'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Paperlogy'; src: url('/static-common/fonts/Paperlogy-4Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Paperlogy'; src: url('/static-common/fonts/Paperlogy-5Medium.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Paperlogy'; src: url('/static-common/fonts/Paperlogy-6SemiBold.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Paperlogy'; src: url('/static-common/fonts/Paperlogy-7Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Paperlogy'; src: url('/static-common/fonts/Paperlogy-8ExtraBold.ttf') format('truetype'); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Paperlogy'; src: url('/static-common/fonts/Paperlogy-9Black.ttf') format('truetype'); font-weight: 900; font-style: normal; font-display: swap; }

/* NanumSquareNeo — 폴백 한국어 폰트 */
@font-face {
  font-family: 'NanumSquareNeo';
  src: url('/static-common/fonts/NanumSquareNeo-Variable.ttf') format('truetype-variations'),
       url('/static-common/fonts/NanumSquareNeo-Variable.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
/* Space Grotesk (Latin display + body) + JetBrains Mono (mono) */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&family=JetBrains+Mono:wght@400;700&display=swap');

:root {
  /* ============ COLOR ============ */

  /* Shells */
  --ink:            #101828;   /* soft charcoal navy — primary bg (dark) / primary text (light) */
  --bone:           #FAFAF7;   /* paper white, slightly warm — primary bg (light) / secondary text (dark) */
  --paper:          #FFFFFF;   /* cards on bone */

  /* Accents — calm fintech */
  --cobalt:         #2E4BD9;   /* deep cobalt — signature, data, CTA */
  --midnight:       #1E3A8A;   /* midnight indigo — depth, secondary blue */
  --mustard:        #FFCC33;   /* golden yellow — insight, warm accent */

  /* Legacy aliases (kept for backwards compat with earlier card references) */
  --teal:           var(--midnight);
  --burnt:          var(--mustard);
  --peach:          var(--mustard);
  --lime:           var(--midnight);
  --lilac:          var(--mustard);
  --electric:       var(--cobalt);
  --mint:           var(--midnight);
  --violet:         var(--mustard);
  --gold:           var(--cobalt);
  --emerald:        var(--midnight);
  --sand:           var(--mustard);
  --coral:          var(--cobalt);
  --orange:         var(--midnight);
  --butter:         var(--mustard);
  --magenta:        var(--cobalt);
  --cyan:           var(--midnight);

  /* Neutral ink */
  --haze:           #667085;   /* muted ink, borders, metadata */
  --haze-20:        rgba(102, 112, 133, 0.20);
  --haze-08:        rgba(102, 112, 133, 0.08);

  /* ============ SEMANTIC COLOR ============ */

  /* Light mode (bone) */
  --bg:             var(--bone);
  --bg-elevated:    var(--paper);
  --fg:             var(--ink);
  --fg-muted:       var(--haze);
  --border:         var(--ink);
  --border-subtle:  var(--haze-20);

  /* Brand accents (alias) */
  --accent:         var(--cobalt);
  --accent-2:       var(--midnight);
  --accent-3:       var(--mustard);

  /* State colors — lifted from the palette, not invented */
  --success:        var(--midnight);
  --warning:        #F59E0B;     /* amber — used sparingly for caution only */
  --danger:         #E55353;     /* signal red — used sparingly for destructive only */
  --info:           var(--cobalt);

  /* ============ TYPOGRAPHY ============ */

  --font-kr:        'Paperlogy', 'NanumSquareNeo', 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display:   'Space Grotesk', 'NanumSquareNeo', sans-serif;
  --font-body:      'Space Grotesk', 'NanumSquareNeo', sans-serif;
  --font-mono:      'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Type scale */
  --type-display:   clamp(64px, 12vw, 184px);
  --type-h1:        clamp(44px, 6vw, 88px);
  --type-h2:        40px;
  --type-h3:        24px;
  --type-body:      17px;
  --type-meta:      13px;
  --type-micro:     11px;

  /* Line heights */
  --lh-display:     0.95;
  --lh-heading:     1.05;
  --lh-body:        1.55;
  --lh-tight:       1.2;

  /* Tracking */
  --track-display:  -0.03em;
  --track-meta:     0.12em;
  --track-body:     0;

  /* Weights */
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-bold:    700;
  --weight-black:   800;

  /* ============ SPACING (4px base) ============ */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-6:   24px;
  --space-8:   32px;
  --space-12:  48px;
  --space-16:  64px;
  --space-24:  96px;
  --space-32:  128px;
  --space-48:  192px;

  /* ============ BORDERS & RADII ============ */
  --border-width:       1px;
  --border-width-bold:  2px;
  --radius-0:           0px;      /* default — everything is square */
  --radius-pill:        999px;    /* only for small status pills */

  /* ============ MOTION ============ */
  --dur-micro:    120ms;
  --dur-std:      240ms;
  --dur-max:      400ms;
  --ease-out:     cubic-bezier(0.22, 1, 0.36, 1);
  --ease-linear:  linear;

  /* ============ LAYOUT ============ */
  --grid-cols:    12;
  --grid-gutter:  96px;
  --page-max:     1440px;
  --page-pad:     48px;

  /* ============ CHART PALETTE (0132 Phase D) ============
     JS Canvas chart 가 runtime 에 `getComputedStyle(document.documentElement).getPropertyValue('--chart-*')`
     로 read 한다. light default 는 cobalt/midnight/mustard 기반, Noir override 는 testbed 의 기존 hardcoded
     색상을 보존하는 dark variant. */
  --chart-1:           #2E4BD9;   /* cobalt — primary series */
  --chart-2:           #1E3A8A;   /* midnight — secondary */
  --chart-3:           #FFCC33;   /* mustard — warm accent */
  --chart-4:           #E55353;   /* danger — negative */
  --chart-5:           #7c3aed;   /* violet */
  --chart-6:           #0284c7;   /* sky */
  --chart-7:           #ea580c;   /* orange */
  --chart-8:           #475569;   /* slate — neutral */
  --chart-bg:          var(--paper);
  --chart-grid:        rgba(102, 112, 133, 0.20);
  --chart-axis-strong: rgba(16, 24, 40, 0.72);
  --chart-axis-subtle: rgba(102, 112, 133, 0.38);
  --chart-zero-line:   rgba(16, 24, 40, 0.55);
  /* alpha rgba 전용 토큰 (0132 Phase B-5 — OD-9 처리) — CSS color-mix 대신 미리 계산된 alpha rgba 토큰. */
  --chart-bar-border:        rgba(16, 24, 40, 0.8);           /* bar border (light = ink ramp) */
  --chart-area-fill:         rgba(46, 75, 217, 0.12);         /* line/area chart fill (light = cobalt 12%) */
  --chart-error-border:      rgba(229, 83, 83, 0.3);          /* error bubble border (light = danger 30%) */
  --chart-error-fg:          #b91c1c;                         /* error bubble fg (light = darker red for bone bg) */
}

/* ---------- Dark mode shell (opt-in via .dark or data-theme="dark") ----------
   홈 페이지의 사용자 toggle 용 dark variant. testbed/admin 의 Terminal Noir 다크는
   별도 `[data-theme="noir"]` block (아래) 으로 추가한다. */
:root.dark,
[data-theme="dark"] {
  --bg:            var(--ink);
  --bg-elevated:   #141419;
  --fg:            var(--bone);
  --fg-muted:      var(--haze);
  --border:        var(--bone);
  --border-subtle: rgba(244, 241, 234, 0.20);
}

/* ---------- 0132 Phase C — Terminal Noir override layer ----------
   testbed (Test profile) / admin 페이지가 `<html data-theme="noir">` 으로 부팅되면
   본 block 의 dark variant 토큰이 cascade 한다. 핵심 의도:
   - 홈 (라이트 default) 과 testbed/admin (다크 Noir) 가 같은 토큰 이름을 쓰되 값만 다름.
   - testbed 의 기존 Terminal Noir 외관 (`#0f172a` 류 surface, slate-400 dim text 등) 보존.
   - state color (success/warning/danger/info) 는 다크에서 가독성 좋은 variant 로 override. */
[data-theme="noir"] {
  /* Semantic shell */
  --bg:             var(--ink);            /* #101828 — testbed 의 가장 어두운 surface */
  --bg-elevated:    #1e293b;               /* slate-800 — sidebar/card surface */
  --fg:             #f8fbff;               /* near-white text on dark */
  --fg-muted:       #94a3b8;               /* slate-400 — secondary text */
  --border:         var(--haze);
  --border-subtle:  rgba(102, 112, 133, 0.30);

  /* State colors — dark variant (현재 testbed/admin hardcoded 값과 매핑) */
  --success:        #34d399;     /* emerald-400 */
  --warning:        #fbbf24;     /* amber-400 */
  --danger:         #f87171;     /* red-400 */
  --info:           #818cf8;     /* indigo-400 */

  /* Chart palette — Noir override (Phase D, testbed 의 기존 hardcoded chart 색상 보존) */
  --chart-1:           #6380e8;   /* primary series — blue */
  --chart-2:           #39d39f;   /* emerald */
  --chart-3:           #ffca3a;   /* mustard yellow */
  --chart-4:           #ff595e;   /* coral red */
  --chart-5:           #a78bfa;   /* violet */
  --chart-6:           #38bdf8;   /* sky */
  --chart-7:           #f97316;   /* orange */
  --chart-8:           #94a3b8;   /* slate-400 */
  --chart-bg:          #111a2b;   /* deep navy — chart canvas bg */
  --chart-grid:        rgba(51, 65, 85, 0.55);
  --chart-axis-strong: rgba(51, 65, 85, 0.72);
  --chart-axis-subtle: rgba(148, 163, 184, 0.38);
  --chart-zero-line:   rgba(51, 65, 85, 0.55);
  /* alpha rgba 전용 토큰 — Noir variant (0132 Phase B-5 / OD-9) */
  --chart-bar-border:    rgba(15, 23, 42, 0.8);                /* bar border (noir = deep slate) */
  --chart-area-fill:     rgba(99, 128, 232, 0.12);             /* line/area chart fill (noir = chart-1 12%) */
  --chart-error-border:  rgba(248, 113, 113, 0.3);             /* error bubble border (noir = danger 30%) */
  --chart-error-fg:      #fca5a5;                              /* error bubble fg (noir = lighter red on dark bg) */
}

/* ============================================================
   BASE ELEMENT STYLES
   ============================================================ */

html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--type-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Korean runs pick up Pretendard automatically via font-family fallback.
   For explicit Korean-only blocks: */
:lang(ko),
.kr {
  font-family: var(--font-kr);
  letter-spacing: -0.01em;
}

/* Headings */
h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--type-h1);
  font-weight: var(--weight-bold);
  line-height: var(--lh-heading);
  letter-spacing: var(--track-display);
  margin: 0;
}
h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--type-h2);
  font-weight: var(--weight-bold);
  line-height: var(--lh-heading);
  letter-spacing: -0.02em;
  margin: 0;
}
h3, .h3 {
  font-family: var(--font-display);
  font-size: var(--type-h3);
  font-weight: var(--weight-medium);
  line-height: var(--lh-tight);
  margin: 0;
}

.display {
  font-family: var(--font-display);
  font-size: var(--type-display);
  font-weight: var(--weight-black);
  line-height: var(--lh-display);
  letter-spacing: var(--track-display);
}

p, .body {
  font-size: var(--type-body);
  line-height: var(--lh-body);
  margin: 0;
}

.meta {
  font-family: var(--font-mono);
  font-size: var(--type-meta);
  font-weight: var(--weight-regular);
  text-transform: uppercase;
  letter-spacing: var(--track-meta);
  color: var(--fg-muted);
}

.micro {
  font-family: var(--font-mono);
  font-size: var(--type-micro);
  letter-spacing: 0.08em;
  color: var(--fg-muted);
}

code, pre, .mono {
  font-family: var(--font-mono);
}

a {
  color: inherit;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: border-color var(--dur-micro) var(--ease-out);
}
a:hover {
  border-bottom-color: var(--accent);
}

/* ============================================================
   UTILITY: hairline rule, crosshair markers, grid overlay
   ============================================================ */

.rule {
  border: 0;
  border-top: var(--border-width) solid var(--fg);
  margin: 0;
}

.rule-subtle {
  border: 0;
  border-top: var(--border-width) solid var(--border-subtle);
  margin: 0;
}

.crosshair::before {
  content: "+";
  color: var(--haze);
  font-family: var(--font-mono);
  font-size: 12px;
  display: inline-block;
}

.grid-overlay {
  background-image:
    linear-gradient(to right, var(--haze-08) 1px, transparent 1px),
    linear-gradient(to bottom, var(--haze-08) 1px, transparent 1px);
  background-size: 48px 48px;
}