/* ─────────────────────────────────────────────────────────────────
   dealog/ds — codename Vellum
   Single-product design system, mobile-first.
   Optimized for: contact path search, dense tabular data,
   long Korean strings, light + dark surfaces.
   Not derived from any third-party app surface.
   ───────────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+KR:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root, [data-theme="light"] {
  /* Surfaces — warm-cool neutrals, never pure white */
  --vlm-paper:        #F6F4EE;   /* base canvas, off-white w/ warm tint */
  --vlm-card:         #FFFFFE;
  --vlm-elev:         #FBFAF6;
  --vlm-line:         rgba(14, 22, 35, 0.08);
  --vlm-line-strong:  rgba(14, 22, 35, 0.16);
  --vlm-overlay:      rgba(14, 22, 35, 0.36);

  /* Ink — text scale, single hue, varying alpha */
  --vlm-ink-1:        #0E1623;     /* primary text */
  --vlm-ink-2:        #2A3344;     /* secondary */
  --vlm-ink-3:        #5C6577;     /* tertiary, captions */
  --vlm-ink-4:        #8C95A6;     /* placeholder, disabled */
  --vlm-ink-5:        #B8BFCC;     /* hairline labels */

  /* Accent — single Signal teal-green. Distinctive vs Korean fintech yellows/blues */
  --vlm-signal:       oklch(64% 0.13 168);
  --vlm-signal-soft:  oklch(94% 0.04 168);
  --vlm-signal-ink:   oklch(36% 0.09 168);

  /* Intimacy ladder — semantic, NOT decorative.
     close → distant, ordered, distinguishable in grayscale by lightness */
  --vlm-int-close:    oklch(72% 0.13 58);    /* warm amber  — 1st degree */
  --vlm-int-known:    oklch(70% 0.10 105);   /* tan-olive   — 2nd degree */
  --vlm-int-distant:  oklch(64% 0.05 240);   /* cool slate  — 3rd degree */
  --vlm-int-cold:     oklch(60% 0.01 250);   /* near-gray   — 4th degree+ */

  /* States */
  --vlm-pos:          oklch(58% 0.12 158);   /* success / positive delta */
  --vlm-neg:          oklch(58% 0.16 25);    /* destructive / negative */
  --vlm-warn:         oklch(72% 0.13 75);    /* attention */

  /* Radii — small, consistent. No pills except chips/avatars. */
  --vlm-r-1:          4px;
  --vlm-r-2:          6px;     /* default */
  --vlm-r-3:          10px;    /* sheets */
  --vlm-r-pill:       999px;   /* avatar / chip only */

  /* Spacing — 4px base, dense */
  --vlm-s-1:          4px;
  --vlm-s-2:          8px;
  --vlm-s-3:          12px;
  --vlm-s-4:          16px;
  --vlm-s-5:          20px;
  --vlm-s-6:          24px;
  --vlm-s-7:          32px;

  /* Type — IBM Plex Sans KR for Korean, JetBrains Mono for figures/codes */
  --vlm-font-text:    'IBM Plex Sans KR', 'Apple SD Gothic Neo', 'Pretendard', system-ui, sans-serif;
  --vlm-font-mono:    'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;

  /* Shadow — minimal, used only on overlays/sheets */
  --vlm-shadow-1:     0 0.5px 0 rgba(14,22,35,0.05), 0 1px 2px rgba(14,22,35,0.04);
  --vlm-shadow-2:     0 1px 0 rgba(14,22,35,0.04), 0 8px 24px rgba(14,22,35,0.10);
  --vlm-shadow-sheet: 0 -1px 0 rgba(14,22,35,0.06), 0 -12px 40px rgba(14,22,35,0.16);

  /* Motion */
  --vlm-ease:         cubic-bezier(0.2, 0.6, 0.2, 1);
  --vlm-dur-fast:     120ms;
  --vlm-dur-base:     180ms;
  --vlm-dur-slow:     280ms;
}

[data-theme="dark"] {
  --vlm-paper:        #0A0F18;
  --vlm-card:         #121826;
  --vlm-elev:         #182032;
  --vlm-line:         rgba(255, 255, 255, 0.07);
  --vlm-line-strong:  rgba(255, 255, 255, 0.14);
  --vlm-overlay:      rgba(0, 0, 0, 0.55);

  --vlm-ink-1:        #ECEFF5;
  --vlm-ink-2:        #C2C8D4;
  --vlm-ink-3:        #8A93A4;
  --vlm-ink-4:        #5E6678;
  --vlm-ink-5:        #3F4659;

  --vlm-signal:       oklch(74% 0.13 168);
  --vlm-signal-soft:  oklch(28% 0.06 168);
  --vlm-signal-ink:   oklch(86% 0.10 168);

  --vlm-int-close:    oklch(76% 0.13 58);
  --vlm-int-known:    oklch(74% 0.10 105);
  --vlm-int-distant:  oklch(68% 0.05 240);
  --vlm-int-cold:     oklch(58% 0.02 250);

  --vlm-pos:          oklch(70% 0.14 158);
  --vlm-neg:          oklch(68% 0.18 25);
  --vlm-warn:         oklch(78% 0.14 75);

  --vlm-shadow-1:     0 1px 0 rgba(0,0,0,0.3), 0 2px 6px rgba(0,0,0,0.4);
  --vlm-shadow-2:     0 1px 0 rgba(0,0,0,0.3), 0 12px 36px rgba(0,0,0,0.55);
  --vlm-shadow-sheet: 0 -1px 0 rgba(255,255,255,0.04), 0 -16px 48px rgba(0,0,0,0.6);
}

/* Type scale — labelled, used by .vlm-t-* */
.vlm-t-display { font-family: var(--vlm-font-text); font-weight: 600; font-size: 28px; line-height: 1.18; letter-spacing: -0.02em; }
.vlm-t-title   { font-family: var(--vlm-font-text); font-weight: 600; font-size: 20px; line-height: 1.25; letter-spacing: -0.01em; }
.vlm-t-h       { font-family: var(--vlm-font-text); font-weight: 600; font-size: 16px; line-height: 1.35; letter-spacing: -0.005em; }
.vlm-t-body    { font-family: var(--vlm-font-text); font-weight: 400; font-size: 14px; line-height: 1.5; }
.vlm-t-body-m  { font-family: var(--vlm-font-text); font-weight: 500; font-size: 14px; line-height: 1.5; }
.vlm-t-meta    { font-family: var(--vlm-font-text); font-weight: 400; font-size: 12px; line-height: 1.45; color: var(--vlm-ink-3); }
.vlm-t-micro   { font-family: var(--vlm-font-text); font-weight: 500; font-size: 11px; line-height: 1.4; letter-spacing: 0.04em; text-transform: uppercase; color: var(--vlm-ink-3); }
.vlm-t-num     { font-family: var(--vlm-font-mono); font-weight: 500; font-feature-settings: 'tnum'; letter-spacing: -0.01em; }

/* Reset-ish for canvas */
* { box-sizing: border-box; }
body { margin: 0; background: var(--vlm-paper); color: var(--vlm-ink-1); font-family: var(--vlm-font-text); -webkit-font-smoothing: antialiased; }