/* ==========================================================================
   MIRROR SEOUL — design tokens
   Mirrors docs/kbjos/04-design-system.md  §2 color · §3 type · §4 space/motion
   Prefix: --ms-*   |   Themes: [data-theme="light"] (default) / "dark"
   ========================================================================== */

:root {
  color-scheme: light;

  /* ---------- §2.1 brand ---------- */
  --ms-rose-50:  #FFF1F4;
  --ms-rose-200: #FFC7D3;
  --ms-rose-500: #E8567A;
  --ms-rose-600: #CE3D62;
  --ms-rose-900: #5E1729;
  --ms-aurum-400: #F4B740;
  --ms-jade-500: #0FB5A0;
  --ms-ultramarine-500: #4C6FFF;
  --ms-signal-500: #E5484D;

  /* on-light AA-safe ink variants (derived — used for text/icons on --ms-surface) */
  --ms-jade-ink:        #08776A; /* 5.45:1 on #FFF */
  --ms-aurum-ink:       #8A6206; /* 5.54:1 */
  --ms-ultramarine-ink: #2A4BD8; /* 6.78:1 */
  --ms-signal-ink:      #B3282D; /* 6.45:1 */
  --ms-rose-ink:        #B03052; /* 6.23:1 on #FFF, 5.80:1 on rose-50 — #CE3D62 was only 4.28:1 on its own tint */

  /* tinted surfaces */
  --ms-jade-tint:        #E6F8F5;
  --ms-aurum-tint:       #FDF3DF;
  --ms-ultramarine-tint: #EDF0FF;
  --ms-signal-tint:      #FDECEC;

  /* CTA pair (AA) */
  --ms-cta-bg: var(--ms-rose-600);
  --ms-cta-fg: #FFFFFF;
  --ms-cta-bg-hover: #B5304F;

  /* ---------- §2.2 neutrals (porcelain -> ink) ---------- */
  --ms-bg: #FBF9F8;
  --ms-surface: #FFFFFF;
  --ms-surface-2: #F5F2F0;
  --ms-surface-3: #EDE8E5;
  --ms-border: #E7E1DE;
  --ms-border-strong: #CFC7C3;
  --ms-text: #171219;
  --ms-text-muted: #6B6270;
  --ms-text-subtle: #736A78; /* 4.73:1 on surface-2 — #7C7382 was 4.07:1, below AA for body text */
  --ms-text-invert: #FFFFFF;

  --ms-scrim: rgba(23, 18, 25, .48);
  --ms-hairline: rgba(23, 18, 25, .08);
  --ms-grid-line: rgba(23, 18, 25, .10);

  /* ---------- §2.3 signature gradients ---------- */
  --ms-gradient-mirror: linear-gradient(135deg, #E8567A 0%, #FF9A76 45%, #F4B740 100%);
  --ms-gradient-night:  linear-gradient(160deg, #15131C 0%, #2A1B33 60%, #3D2038 100%);
  --ms-gradient-jade:   linear-gradient(135deg, #0FB5A0 0%, #4C6FFF 100%);
  --ms-mesh-hero:
    radial-gradient(60% 55% at 18% 12%, rgba(232, 86, 122, .30) 0%, transparent 60%),
    radial-gradient(55% 50% at 85% 20%, rgba(244, 183, 64, .24) 0%, transparent 62%),
    radial-gradient(70% 60% at 50% 95%, rgba(15, 181, 160, .20) 0%, transparent 65%);
  --ms-mesh-soft:
    radial-gradient(48% 60% at 92% 4%, rgba(232, 86, 122, .13) 0%, transparent 60%),
    radial-gradient(40% 50% at 4% 96%, rgba(76, 111, 255, .10) 0%, transparent 62%);

  /* ---------- §3 typography ---------- */
  --ms-font-display: "Instrument Serif", "Noto Serif KR", "Apple SD Gothic Neo",
                     "Noto Serif SC", "Noto Serif JP", "Songti SC", "Yu Mincho",
                     Georgia, "Times New Roman", serif;
  --ms-font-sans: "Pretendard Variable", "Pretendard", "Inter", -apple-system,
                  BlinkMacSystemFont, "Segoe UI", "Malgun Gothic", "Apple SD Gothic Neo",
                  "Noto Sans KR", "Noto Sans SC", "Microsoft YaHei", "Noto Sans JP",
                  "Hiragino Sans", "Yu Gothic UI", "Meiryo", system-ui, sans-serif;
  --ms-font-mono: "JetBrains Mono", "SFMono-Regular", ui-monospace, "Cascadia Mono",
                  "Consolas", "D2Coding", monospace;

  --ms-display-xl: clamp(2.75rem, 6vw, 5.5rem);
  --ms-display-lg: clamp(2.25rem, 4.2vw, 3.75rem);
  --ms-heading-1: clamp(1.625rem, 2.4vw, 2rem);
  --ms-heading-2: 1.5rem;
  --ms-heading-3: 1.175rem;
  --ms-body-lg: 1.0625rem;
  --ms-body: 0.9375rem;
  --ms-caption: 0.8125rem;
  --ms-overline: 0.6875rem;

  --ms-lh-display-xl: 0.98;
  --ms-lh-display-lg: 1.04;
  --ms-lh-h1: 1.18;
  --ms-lh-h2: 1.25;
  --ms-lh-h3: 1.35;
  --ms-lh-body: 1.65;
  --ms-lh-body-lg: 1.7;

  --ms-track-display-xl: -0.03em;
  --ms-track-display-lg: -0.025em;
  --ms-track-h1: -0.02em;
  --ms-track-h2: -0.015em;
  --ms-track-h3: -0.01em;
  --ms-track-overline: 0.14em;

  /* ---------- §4 space ---------- */
  --ms-space-1: 4px;   --ms-space-2: 8px;   --ms-space-3: 12px;  --ms-space-4: 16px;
  --ms-space-6: 24px;  --ms-space-8: 32px;  --ms-space-10: 40px; --ms-space-12: 48px;
  --ms-space-16: 64px; --ms-space-20: 80px; --ms-space-24: 96px; --ms-space-32: 128px;
  --ms-space-40: 160px; --ms-space-56: 224px; --ms-space-80: 320px;

  /* ---------- §4 radius ---------- */
  --ms-radius-sm: 8px;
  --ms-radius-md: 14px;
  --ms-radius-lg: 20px;
  --ms-radius-xl: 28px;
  --ms-radius-pill: 999px;

  /* ---------- §4 shadow ---------- */
  --ms-shadow-card:  0 1px 2px rgba(23, 18, 25, .04), 0 8px 24px -12px rgba(23, 18, 25, .14);
  --ms-shadow-float: 0 2px 6px rgba(23, 18, 25, .06), 0 24px 48px -20px rgba(23, 18, 25, .22);
  --ms-shadow-glow:  0 0 0 1px rgba(232, 86, 122, .22), 0 12px 40px -12px rgba(232, 86, 122, .42);

  /* ---------- §4 motion ---------- */
  --ms-ease-out: cubic-bezier(.22, 1, .36, 1);
  --ms-ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ms-dur-fast: 160ms;
  --ms-dur-base: 260ms;
  --ms-dur-slow: 420ms;
  --ms-dur-reveal: 640ms;

  /* ---------- §4 layout ---------- */
  --ms-container: 1280px;
  --ms-gutter: 20px;
  --ms-grid-gap: 24px;
  --ms-header-h: 64px;

  /* ---------- §2.4 semantic status ---------- */
  --ms-status-verified: var(--ms-jade-ink);
  --ms-status-verified-bg: var(--ms-jade-tint);
  --ms-status-expiring: var(--ms-aurum-ink);
  --ms-status-expiring-bg: var(--ms-aurum-tint);
  /* text-subtle (#7C7382) is only 4.07:1 on surface-2 - below AA for body text.
     The unverified badge therefore uses the muted ink (5.49:1 on surface-2). */
  --ms-status-unverified: var(--ms-text-muted);
  --ms-status-unverified-bg: var(--ms-surface-2);
  --ms-status-sponsored: var(--ms-aurum-ink);
  --ms-status-sponsored-bg: transparent;
  --ms-status-restricted: var(--ms-signal-ink);
  --ms-status-restricted-bg: transparent;
  --ms-status-urgent-bg: var(--ms-signal-ink);
  --ms-status-urgent-fg: #FFFFFF;
  --ms-status-info: var(--ms-ultramarine-ink);
  --ms-status-info-bg: var(--ms-ultramarine-tint);

  /* ---------- chart palette (05-token-additions.md §3 · MAIN0 R4) ----------
     R4 브랜드색 ≠ 차트색 — jade-500 2.58:1 / aurum-400 1.80:1 은 비텍스트 3:1
     미달이므로 차트 채움색으로 쓸 수 없다. 차트는 --ms-chart-* 만 사용한다.
     전 계열 4.5:1 이상 → 채움색이자 값 라벨 색 (직접 라벨링, 범례 없음). */
  --ms-chart-1: #C9315C;
  --ms-chart-2: #3355D8;
  --ms-chart-3: #00786B;
  --ms-chart-4: #8A5A00;
  --ms-chart-5: #6B3FA0;
  --ms-chart-6: #B4441A;
  --ms-chart-7: #4E5A6B;
  --ms-chart-8: #4C6B1F;

  /* chart chrome (05 §3.4) */
  --ms-chart-grid:       #E7E1DE;
  --ms-chart-axis:       #6B6270;
  --ms-chart-annotation: #71697A; /* 4.80:1 on surface-2 (05 §3.4 listed 4.48, just under the AA gate) */
  --ms-chart-zero:       #948C9B;
  --ms-chart-band:       #EFECEA;
  --ms-chart-band-core:  #D6CFD4;
  --ms-chart-marker:     #171219;

  /* heat ramp (05 §4.1) — heat-calendar / world-bubble density */
  --ms-heat-0: #FFF1F4; --ms-heat-1: #FFD6DF; --ms-heat-2: #FFAFC1;
  --ms-heat-3: #F87E9C; --ms-heat-4: #DE4570; --ms-heat-5: #B02A52;

  /* series aliases — every chart mark resolves to the chart palette, never brand */
  --ms-series-1: var(--ms-chart-1);
  --ms-series-2: var(--ms-chart-2);
  --ms-series-3: var(--ms-chart-3);
  --ms-series-4: var(--ms-chart-4);
  --ms-series-5: var(--ms-chart-5);
  --ms-series-6: var(--ms-chart-6);
  --ms-series-7: var(--ms-chart-7);
  --ms-series-8: var(--ms-chart-8);
  --ms-series-9: var(--ms-chart-2);
}

@media (min-width: 768px)  { :root { --ms-gutter: 32px; --ms-header-h: 72px; } }
@media (min-width: 1280px) { :root { --ms-gutter: 48px; } }

/* ==========================================================================
   Dark theme
   ========================================================================== */
[data-theme="dark"] {
  color-scheme: dark;

  --ms-rose-50:  #2A1119;
  --ms-rose-200: #5C2233;
  --ms-rose-500: #FF6E8E;
  --ms-rose-600: #E8567A;
  --ms-rose-900: #FFD9E1;
  --ms-aurum-400: #F7C862;
  --ms-jade-500: #2FD3BE;
  --ms-ultramarine-500: #7A93FF;
  --ms-signal-500: #FF6369;

  --ms-jade-ink:        #2FD3BE;
  --ms-aurum-ink:       #F7C862;
  --ms-ultramarine-ink: #7A93FF;
  --ms-signal-ink:      #FF8A8E;
  --ms-rose-ink:        #FF8FA8;

  --ms-jade-tint:        #0C2C2A;
  --ms-aurum-tint:       #33270D;
  --ms-ultramarine-tint: #171B33;
  --ms-signal-tint:      #331417;

  --ms-cta-bg: var(--ms-rose-500);
  --ms-cta-fg: #240610;
  --ms-cta-bg-hover: #FF8FA8;

  --ms-bg: #0B0A10;
  --ms-surface: #15131C;
  --ms-surface-2: #1E1B27;
  --ms-surface-3: #272231;
  --ms-border: #2C2836;
  --ms-border-strong: #453F52;
  --ms-text: #F4F1F6;
  --ms-text-muted: #A29AAC;
  --ms-text-subtle: #8B8397;
  --ms-text-invert: #0B0A10;

  --ms-scrim: rgba(4, 3, 8, .68);
  --ms-hairline: rgba(244, 241, 246, .10);
  --ms-grid-line: rgba(244, 241, 246, .12);

  --ms-mesh-hero:
    radial-gradient(60% 55% at 18% 12%, rgba(232, 86, 122, .26) 0%, transparent 60%),
    radial-gradient(55% 50% at 85% 20%, rgba(244, 183, 64, .16) 0%, transparent 62%),
    radial-gradient(70% 60% at 50% 95%, rgba(15, 181, 160, .18) 0%, transparent 65%);
  --ms-mesh-soft:
    radial-gradient(48% 60% at 92% 4%, rgba(232, 86, 122, .14) 0%, transparent 60%),
    radial-gradient(40% 50% at 4% 96%, rgba(122, 147, 255, .12) 0%, transparent 62%);

  --ms-shadow-card:  0 1px 2px rgba(0, 0, 0, .40), 0 10px 28px -14px rgba(0, 0, 0, .70);
  --ms-shadow-float: 0 2px 8px rgba(0, 0, 0, .48), 0 28px 56px -22px rgba(0, 0, 0, .80);
  --ms-shadow-glow:  0 0 0 1px rgba(255, 110, 142, .28), 0 12px 40px -12px rgba(255, 110, 142, .34);

  --ms-status-urgent-bg: #FF6369;
  --ms-status-urgent-fg: #2A0507;

  --ms-chart-1: #FF7D9B;
  --ms-chart-2: #8FA4FF;
  --ms-chart-3: #3FDBC6;
  --ms-chart-4: #F7C862;
  --ms-chart-5: #C3A0FF;
  --ms-chart-6: #FF9E72;
  --ms-chart-7: #A6B4C6;
  --ms-chart-8: #A9CE6B;

  --ms-chart-grid:       #2C2836;
  --ms-chart-axis:       #A29AAC;
  --ms-chart-annotation: #8F8799;
  --ms-chart-zero:       #7A7286;
  --ms-chart-band:       #221F2B;
  --ms-chart-band-core:  #3A3546;
  --ms-chart-marker:     #F4F1F6;

  --ms-heat-0: #241820; --ms-heat-1: #3A1F2C; --ms-heat-2: #572838;
  --ms-heat-3: #8A3A54; --ms-heat-4: #C25675; --ms-heat-5: #FF89A5;
}

/* ==========================================================================
   §3 CJK typographic relaxation
   Applied by app.js via <html lang> — display tracking eased to -0.01em
   ========================================================================== */
:root[lang="ko"], :root[lang="zh-CN"], :root[lang="ja"] {
  --ms-track-display-xl: -0.01em;
  --ms-track-display-lg: -0.01em;
  --ms-track-h1: -0.008em;
  --ms-track-h2: -0.005em;
  --ms-track-h3: 0em;
}