/* ========================================
   DESIGN TOKENS — ModelCap V2
   Bloomberg terminal aesthetic
   ======================================== */

:root {
  /* ---- Typography Scale (fluid clamp) ---- */
  --text-xs:   clamp(0.6875rem, 0.65rem + 0.15vw, 0.75rem);    /* 11-12px */
  --text-sm:   clamp(0.75rem, 0.7rem + 0.2vw, 0.8125rem);      /* 12-13px */
  --text-base: clamp(0.8125rem, 0.775rem + 0.2vw, 0.875rem);   /* 13-14px */
  --text-md:   clamp(0.875rem, 0.84rem + 0.2vw, 0.9375rem);    /* 14-15px */
  --text-lg:   clamp(1rem, 0.95rem + 0.25vw, 1.125rem);        /* 16-18px */
  --text-xl:   clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);   /* 18-21px */
  --text-2xl:  clamp(1.375rem, 1.25rem + 0.5vw, 1.625rem);     /* 22-26px */
  --text-3xl:  clamp(1.75rem, 1.55rem + 0.75vw, 2.25rem);      /* 28-36px */
  --text-4xl:  clamp(2.25rem, 1.95rem + 1.1vw, 3rem);          /* 36-48px */

  /* ---- Font stacks ---- */
  --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-data: 'JetBrains Mono', 'Fira Code', 'SF Mono', monospace;

  /* ---- 4px spacing system ---- */
  --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;
  --sp-24: 96px;

  /* ---- Border radius ---- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* ---- Category accent colors ---- */
  --cat-text:      #3b82f6;
  --cat-image:     #a855f7;
  --cat-video:     #f59e0b;
  --cat-audio:     #10b981;
  --cat-code:      #6366f1;
  --cat-embedding: #ec4899;

  /* ---- Semantic colors ---- */
  --green:  #22c55e;
  --red:    #ef4444;
  --amber:  #f59e0b;
  --blue:   #3b82f6;

  /* ---- Motion ---- */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 120ms;
  --duration-base: 180ms;
  --duration-slow: 320ms;
  --duration-expand: 400ms;

  /* ---- Shadows ---- */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.3);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.4);
  --shadow-xl: 0 16px 48px rgba(0,0,0,0.5);

  /* ---- Content widths ---- */
  --max-width: 1440px;
  --max-width-wide: 1600px;
}

/* ======== DARK THEME (default) ======== */
[data-theme="dark"] {
  --bg-base:      #0d1017;
  --bg-surface:   #151a24;
  --bg-elevated:  #1b2231;
  --bg-hover:     #222b3a;
  --bg-active:    #2a3548;

  --border-base:    rgba(255,255,255,0.06);
  --border-subtle:  rgba(255,255,255,0.04);
  --border-strong:  rgba(255,255,255,0.12);

  --text-primary:   #e8eaed;
  --text-secondary: #9aa0ab;
  --text-tertiary:  #5f6672;
  --text-inverse:   #0d1017;

  --accent:        #3b82f6;
  --accent-hover:  #60a5fa;
  --accent-muted:  rgba(59,130,246,0.15);
  --accent-subtle: rgba(59,130,246,0.08);

  --success:       #22c55e;
  --success-muted: rgba(34,197,94,0.12);
  --danger:        #ef4444;
  --danger-muted:  rgba(239,68,68,0.12);
  --warning:       #f59e0b;
  --warning-muted: rgba(245,158,11,0.12);

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.4);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.5);

  --scrollbar-track: #151a24;
  --scrollbar-thumb: #2a3548;
  --scrollbar-thumb-hover: #3a4a5e;

  color-scheme: dark;
}

/* ======== LIGHT THEME ======== */
[data-theme="light"] {
  --bg-base:      #f8f6f3;
  --bg-surface:   #ffffff;
  --bg-elevated:  #f0ede8;
  --bg-hover:     #e8e4de;
  --bg-active:    #ddd8d0;

  --border-base:    rgba(0,0,0,0.08);
  --border-subtle:  rgba(0,0,0,0.04);
  --border-strong:  rgba(0,0,0,0.15);

  --text-primary:   #1a1a1a;
  --text-secondary: #5c5c5c;
  --text-tertiary:  #8a8a8a;
  --text-inverse:   #ffffff;

  --accent:        #2563eb;
  --accent-hover:  #1d4ed8;
  --accent-muted:  rgba(37,99,235,0.10);
  --accent-subtle: rgba(37,99,235,0.05);

  --success:       #16a34a;
  --success-muted: rgba(22,163,74,0.10);
  --danger:        #dc2626;
  --danger-muted:  rgba(220,38,38,0.10);
  --warning:       #d97706;
  --warning-muted: rgba(217,119,6,0.10);

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.12);

  --scrollbar-track: #f0ede8;
  --scrollbar-thumb: #c4bfb6;
  --scrollbar-thumb-hover: #a8a29e;

  color-scheme: light;
}