@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap');

/* ─── Design tokens ──────────────────────────────────────────────────────────
   Single source of truth. All component files reference these vars.
   ──────────────────────────────────────────────────────────────────────────── */
:root {
  /* Brand */
  --color-primary:       #f59e0b;
  --color-primary-hover: #d97706;
  --color-primary-light: rgba(245, 158, 11, 0.12);
  --color-primary-glow:  rgba(245, 158, 11, 0.35);

  /* Semantic */
  --color-success:       #10b981;
  --color-success-bg:    rgba(16, 185, 129, 0.08);
  --color-warning:       #f59e0b;
  --color-danger:        #ef4444;
  --color-danger-hover:  #dc2626;
  --color-danger-bg:     rgba(239, 68, 68, 0.08);
  --color-info:          #3b82f6;

  /* Surfaces — dark */
  --bg-base:       #07080d;   /* deepest background */
  --bg-primary:    #07080d;
  --bg-secondary:  #0d0e17;   /* cards, panels */
  --bg-tertiary:   #111318;   /* elevated inputs, hover rows */
  --bg-overlay:    #13151e;   /* borders, dividers */
  --bg-sidebar:    #0a0b14;

  /* Text */
  --text-primary:   #f9fafb;
  --text-secondary: #9ca3af;
  --text-muted:     #4b5563;
  --text-sidebar:   #e5e7eb;

  /* Border */
  --border-color:   #1f2229;
  --border-subtle:  #13151e;

  /* Radius */
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  14px;
  --radius-xl:  18px;
  --radius-2xl: 24px;

  /* Legacy aliases so existing component code still compiles */
  --border-radius-sm:  var(--radius-sm);
  --border-radius-md:  var(--radius-md);
  --border-radius-lg:  var(--radius-lg);
  --border-radius-xl:  var(--radius-xl);

  /* Shadows (dark-mode appropriate — subtle, use color not just black) */
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.4);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.5);
  --shadow-lg:  0 10px 30px rgba(0,0,0,0.6);
  --shadow-xl:  0 20px 60px rgba(0,0,0,0.7);
  --shadow-glow: 0 0 32px var(--color-primary-glow);

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast:   150ms var(--ease-out);
  --transition-normal: 250ms var(--ease-out);
  --transition-slow:   400ms var(--ease-out);
}

/* ─── Reset ──────────────────────────────────────────────────────────────────*/
*,
*::before,
*::after {
  box-sizing: border-box;
}

html, body, #root {
  margin: 0;
  padding: 0;
  background: var(--bg-base);
  color: var(--text-primary);
}

/* ─── Typography ─────────────────────────────────────────────────────────────*/
body {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'DM Serif Display', serif;
  font-weight: 400;           /* Serif Display looks better at regular weight */
  letter-spacing: -0.025em;
  margin: 0;
  color: var(--text-primary);
}

h1 { font-size: 2rem;    line-height: 1.15; }
h2 { font-size: 1.5rem;  line-height: 1.25; }
h3 { font-size: 1.2rem;  line-height: 1.3;  font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 600; }

code, pre, kbd {
  font-family: 'JetBrains Mono', 'Fira Code', Menlo, Consolas, monospace;
}

/* ─── Scrollbar ──────────────────────────────────────────────────────────────*/
::-webkit-scrollbar        { width: 6px; height: 6px; }
::-webkit-scrollbar-track  { background: transparent; }
::-webkit-scrollbar-thumb  { background: var(--border-color); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* ─── Embed mode ─────────────────────────────────────────────────────────────*/
body.embed-mode {
  background: transparent;
}
body.embed-mode .header,
body.embed-mode .ant-layout-sider {
  display: none !important;
}
body.embed-mode .ant-layout-content {
  padding: 16px !important;
  min-height: 100vh !important;
}

/* ─── Animations ─────────────────────────────────────────────────────────────*/
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0);    }
}

@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-16px); }
  to   { opacity: 1; transform: translateX(0);     }
}

@keyframes pulse {
  0%, 100% { opacity: 1;   }
  50%       { opacity: 0.6; }
}

@keyframes shimmer {
  from { background-position: -200% center; }
  to   { background-position:  200% center; }
}

/* ─── Stagger helpers ────────────────────────────────────────────────────────*/
.stagger-1 { animation-delay:  60ms; }
.stagger-2 { animation-delay: 120ms; }
.stagger-3 { animation-delay: 180ms; }
.stagger-4 { animation-delay: 240ms; }
.stagger-5 { animation-delay: 300ms; }