/* IntegrationOS — Design Tokens (CryptoVault Fintech Dark) */

:root{
  /* Typography */
  --font-sans: "Plus Jakarta Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  /* Radii */
  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;

  /* Spacing (4px grid) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 28px;
  --sp-8: 32px;

  /* Brand — Lime Green accent (CryptoVault) */
  --accent: #7BFA4C;
  --accent-2: #A8FF6A;
  --accent-ink: #080D18;
  --accent-bg: rgba(123, 250, 76, .08);
  --accent-border: rgba(123, 250, 76, .20);
  --focus-ring: rgba(123, 250, 76, .25);

  /* Semantic */
  --success: #22C55E;
  --success-bg: rgba(34, 197, 94, .10);
  --warning: #F59E0B;
  --warning-bg: rgba(245, 158, 11, .10);
  --danger: #EF4444;
  --danger-bg: rgba(239, 68, 68, .10);

  /* Light mode (default) */
  --bg: #F7F8FC;
  --bg-elev-1: #FFFFFF;
  --bg-elev-2: #F1F3FB;
  --bg-elev-3: #E9ECF8;

  --border: rgba(15, 23, 42, .10);
  --border-2: rgba(15, 23, 42, .14);

  --text: #0F172A;
  --text-2: #334155;
  --text-3: #64748B;
  --text-4: #94A3B8;

  --shadow-sm: 0 1px 2px rgba(15,23,42,.06), 0 1px 1px rgba(15,23,42,.04);
  --shadow-md: 0 12px 24px rgba(15,23,42,.08), 0 4px 10px rgba(15,23,42,.06);

  /* Layout */
  --sidebar-w: 248px;
  --topbar-h: 56px;
}

html:not(.light){
  /* Dark mode — CryptoVault deep navy */
  --bg: #070B16;
  --bg-elev-1: #0D1120;
  --bg-elev-2: #111828;
  --bg-elev-3: #1A2440;

  --border: rgba(123, 250, 76, .08);
  --border-2: rgba(123, 250, 76, .16);

  --text: #E8EAF6;
  --text-2: rgba(232, 234, 246, .78);
  --text-3: rgba(232, 234, 246, .52);
  --text-4: rgba(232, 234, 246, .32);

  --shadow-sm: none;
  --shadow-md: none;
}

/* Compatibility aliases (old pages expect these names) */
:root{
  --display: var(--font-sans);
  --mono: var(--font-mono);
  --s0: var(--bg-elev-1);
  --s1: var(--bg-elev-1);
  --s2: var(--bg-elev-2);
  --s3: var(--bg-elev-3);
  --border-mid: var(--border-2);
  --border-acc: var(--accent-border);
  --border-foc: var(--focus-ring);
  --green: var(--success);
  --green-bg: var(--success-bg);
  --amber: var(--warning);
  --amber-bg: var(--warning-bg);
  --red: var(--danger);
  --red-bg: var(--danger-bg);
  --text2: var(--text-2);
  --text3: var(--text-3);
  --text4: var(--text-4);
  --r: var(--r-sm);
  --r-lg: var(--r-md);
  --r-xl: var(--r-lg);
  --accent-grad: var(--accent);
}