/* ═══════════════════════════════════════════════════════════════
   EZ Design System — Design Tokens
   Aesthetic: Analytical precision — Bloomberg meets clean data viz

   Copy this file into your project and import it globally.
   All values use CSS custom properties for easy theming.
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=DM+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ── Typography ── */
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-sans: 'DM Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;

  /* Type scale */
  --text-xs: 11px;
  --text-sm: 12px;
  --text-base: 14px;
  --text-md: 15px;
  --text-lg: 16px;
  --text-xl: 18px;
  --text-2xl: 20px;
  --text-3xl: 24px;
  --text-4xl: 32px;

  /* Weights */
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Line heights */
  --leading-tight: 1.2;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  /* ── Colors: warm-tinted neutrals (never pure gray) ── */
  --color-black: #1a1917;
  --color-white: #faf9f7;

  --gray-50:  #f6f5f3;
  --gray-100: #eeedeb;
  --gray-200: #e2e0dc;
  --gray-300: #d1cfc9;
  --gray-400: #a8a69f;
  --gray-500: #85837c;
  --gray-600: #65635d;
  --gray-700: #4d4b46;
  --gray-800: #353430;
  --gray-900: #23221f;

  /* ── Accent: dark green (change for your brand) ── */
  --accent-50:  #f0fdf4;
  --accent-100: #dcfce7;
  --accent-200: #86efac;
  --accent-300: #4ade80;
  --accent-400: #22c55e;
  --accent-500: #14532d;
  --accent-600: #0f4024;
  --accent-700: #0a2e1a;

  /* ── Domain colors (for categorized data) ── */
  --domain-purple:  #6246ea;
  --domain-blue:    #2563eb;
  --domain-cyan:    #0891b2;
  --domain-green:   #059669;
  --domain-amber:   #b45309;
  --domain-red:     #dc2626;
  --domain-magenta: #c026d3;
  --domain-violet:  #7c3aed;

  /* ── Maturity ring colors ── */
  --maturity-mature:       #2d9d78;
  --maturity-growth:       #3B82F6;
  --maturity-emerging:     #d4940a;
  --maturity-experimental: #d64545;

  /* ── Source brand colors ── */
  --source-github:      #2ea44f;
  --source-huggingface: #d4a017;
  --source-arxiv:       #3B82F6;

  /* ── Semantic colors ── */
  --color-success: #2d9d78;
  --color-warning: #d4940a;
  --color-error:   #d64545;
  --color-info:    #3B82F6;

  /* ── Text hierarchy ── */
  --text-primary:   var(--gray-900);
  --text-secondary: var(--gray-600);
  --text-tertiary:  var(--gray-500);
  --text-muted:     var(--gray-400);
  --text-accent:    var(--accent-600);

  /* ── Backgrounds ── */
  --bg-primary:   var(--color-white);
  --bg-secondary: var(--gray-50);
  --bg-tertiary:  var(--gray-100);
  --bg-hover:     var(--gray-100);
  --bg-active:    var(--gray-200);

  /* ── Borders ── */
  --border-light:   var(--gray-200);
  --border-default: var(--gray-300);
  --border-hover:   var(--gray-400);
  --border-focus:   var(--accent-500);

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

  /* ── Border radius ── */
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   10px;
  --radius-full: 9999px;

  /* ── Shadows (barely visible — prefer borders) ── */
  --shadow-sm: 0 1px 2px rgba(26, 25, 23, 0.05);
  --shadow-md: 0 2px 8px rgba(26, 25, 23, 0.08);
  --shadow-lg: 0 8px 24px rgba(26, 25, 23, 0.1);

  /* ── Transitions ── */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast: 150ms var(--ease-out);
  --transition-base: 200ms var(--ease-out);
  --transition-slow: 300ms var(--ease-out);

  /* ── Layout dimensions ── */
  --navbar-height: 48px;
  --sidebar-width: 240px;
  --sidebar-collapsed: 44px;
  --panel-width: 380px;
}

/* ═══════════════════════════════════════════════════════════════
   Dark Mode — toggle with body.dark or .dark class
   ═══════════════════════════════════════════════════════════════ */

body.dark,
.dark {
  --text-primary:   #e5e4e1;
  --text-secondary: #a09e98;
  --text-tertiary:  #7a7873;
  --text-muted:     #5a5854;
  --text-accent:    var(--accent-200);

  --bg-primary:   #1a1917;
  --bg-secondary: #222120;
  --bg-tertiary:  #2a2928;
  --bg-hover:     #302f2d;
  --bg-active:    #3a3937;

  --border-light:   #333230;
  --border-default: #44433f;
  --border-hover:   #5a5955;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.25);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.3);
}

/* ═══════════════════════════════════════════════════════════════
   Base Resets
   ═══════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  background: var(--bg-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: var(--leading-tight);
  font-weight: var(--weight-bold);
}

h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }

::selection { background: var(--accent-100); color: var(--accent-700); }
:focus-visible { outline: 2px solid var(--accent-500); outline-offset: 2px; }

a { color: var(--text-accent); text-decoration: none; transition: var(--transition-fast); }
a:hover { text-decoration: underline; }

button { font-family: inherit; cursor: pointer; border: none; background: none; }
input, select, textarea { font-family: inherit; font-size: inherit; }

/* ── Scrollbars ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: 3px; }
.dark ::-webkit-scrollbar-thumb { background: var(--gray-700); }

/* ═══════════════════════════════════════════════════════════════
   Responsive Overrides
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 1200px) {
  :root {
    --sidebar-width: 200px;
    --panel-width: 340px;
  }
}

@media (max-width: 960px) {
  :root {
    --sidebar-width: 0px;
    --panel-width: 100%;
  }
}

@media (max-width: 640px) {
  :root {
    --text-base: 13px;
    --text-3xl: 20px;
    --text-4xl: 26px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   Utility Animations
   ═══════════════════════════════════════════════════════════════ */

@keyframes slideUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.animate-slide-up { animation: slideUp 400ms var(--ease-out) both; }
.animate-fade-in  { animation: fadeIn 200ms var(--ease-out) both; }