/* =========================================================================
 * Creata Control Plane — Design Tokens
 * 설계서 Part II 기반
 * ======================================================================== */

:root {
  /* ── Brand Navy Scale ── */
  --navy-900: #0A1F44;
  --navy-800: #132A5C;
  --navy-700: #1A365D;
  --navy-600: #234577;
  --navy-500: #2C5491;
  --navy-400: #3B6EB8;
  --navy-300: #6B94CF;
  --navy-200: #A3BCDF;
  --navy-100: #D6E0EE;
  --navy-50:  #EEF2F8;

  /* ── Accent & Gold ── */
  --accent:     #1E5C97;
  --accent-50:  #EBF2FA;
  --accent-100: #D5E5F3;
  --accent-200: #ABCAE6;
  --gold:       #B8860B;
  --gold-soft:  #E2B85E;
  --gold-50:    #FAF3E3;

  /* ── Status ── */
  --success:       #10B981;
  --success-soft:  #D1FAE5;
  --warning:       #F59E0B;
  --warning-soft:  #FEF3C7;
  --danger:        #EF4444;
  --danger-soft:   #FEE2E2;
  --info:          #3B82F6;
  --info-soft:     #DBEAFE;

  /* ── Gray scale ── */
  --gray-900: #0F172A;
  --gray-800: #1E293B;
  --gray-700: #334155;
  --gray-600: #475569;
  --gray-500: #64748B;
  --gray-400: #94A3B8;
  --gray-300: #CBD5E1;
  --gray-200: #E2E8F0;
  --gray-100: #F1F5F9;
  --gray-50:  #F8FAFC;
  --white:    #FFFFFF;

  /* ── Track accents (Chinese Wall) ── */
  --track-bank:       #1E5C97;
  --track-securities: #B8860B;
  --track-foreign:    #6B7B8C;
  --track-regulatory: #6366F1;
  --track-hub:        #0A1F44;
  --track-audit:      #0EA5E9;

  /* ── Surfaces ── */
  --bg-app:        var(--gray-50);
  --bg-surface:    var(--white);
  --bg-elevated:   var(--white);
  --bg-inverse:    var(--navy-900);
  --bg-mono:       #F4F4F7;
  --bg-sidebar:    var(--navy-900);
  --bg-topbar:     var(--white);
  --bg-context:    var(--gray-50);

  /* ── Text ── */
  --text-primary:   var(--gray-900);
  --text-secondary: var(--gray-700);
  --text-muted:     var(--gray-500);
  --text-inverse:   var(--white);
  --text-accent:    var(--accent);
  --text-navy:      var(--navy-900);
  --text-gold:      var(--gold);

  /* ── Borders ── */
  --border-subtle:  var(--gray-200);
  --border-default: var(--gray-300);
  --border-strong:  var(--gray-400);
  --border-navy:    var(--navy-700);

  /* ── Typography ── */
  --font-sans:
    "Pretendard", "Pretendard Variable", -apple-system, BlinkMacSystemFont,
    "Segoe UI", "Malgun Gothic", "맑은 고딕", Roboto, sans-serif;
  --font-mono:
    "JetBrains Mono", "D2Coding", "Fira Code", Consolas, Monaco, monospace;

  --fs-xs:   11px;
  --fs-sm:   12px;
  --fs-base: 13px;
  --fs-md:   14px;
  --fs-lg:   16px;
  --fs-xl:   18px;
  --fs-2xl:  22px;
  --fs-3xl:  28px;
  --fs-4xl:  34px;
  --fs-5xl:  44px;

  --lh-tight:  1.2;
  --lh-normal: 1.45;
  --lh-loose:  1.65;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;

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

  /* ── Radius ── */
  --r-xs:   3px;
  --r-sm:   5px;
  --r-md:   8px;
  --r-lg:   12px;
  --r-xl:   16px;
  --r-2xl:  20px;
  --r-full: 999px;

  /* ── Elevation ── */
  --shadow-xs: 0 1px 2px rgba(10,31,68,0.04);
  --shadow-sm: 0 2px 4px rgba(10,31,68,0.06);
  --shadow-md: 0 4px 12px rgba(10,31,68,0.08);
  --shadow-lg: 0 8px 24px rgba(10,31,68,0.10);
  --shadow-xl: 0 16px 40px rgba(10,31,68,0.14);
  --shadow-focus: 0 0 0 3px rgba(30,92,151,0.25);

  /* ── Motion ── */
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:   120ms;
  --dur-base:   200ms;
  --dur-slow:   360ms;

  /* ── Z-index ── */
  --z-base:     1;
  --z-sticky:   10;
  --z-dropdown: 50;
  --z-overlay:  100;
  --z-modal:    200;
  --z-toast:    300;
  --z-top:      999;

  /* ── Layout ── */
  --topbar-h:   56px;
  --sidebar-w:  248px;
  --sidebar-collapsed-w: 64px;
  --context-w:  360px;
  --container-max: 1600px;
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--text-primary);
  background: var(--bg-app);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input, select, textarea { font-family: inherit; font-size: inherit; }

/* Tabular nums for finance */
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.num  { font-variant-numeric: tabular-nums; }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--gray-400); }

::selection { background: var(--accent-100); color: var(--navy-900); }