/**
 * GoToolstack — Design System Variables & Base Reset
 * Inspired by Stripe & Apple Human Interface Design Standards.
 */

:root {
  /* Color Palette — Light Theme (Default) */
  --bg: #F8FAFC;
  --bg-subtle: #F1F5F9;
  --panel: #FFFFFF;
  --panel-2: #F8FAFC;
  --panel-glass: rgba(255, 255, 255, 0.85);
  
  --line: #E2E8F0;
  --line-subtle: rgba(0, 0, 0, 0.05);
  --line-focus: #0055FF;
  
  --text: #0F172A;
  --text-secondary: #334155;
  --muted: #64748B;
  --muted-2: #94A3B8;

  /* Accent Brand Colors */
  --brand: #0055FF;
  --brand-2: #2563EB;
  --brand-dim: #EFF6FF;
  --brand-glow: rgba(0, 85, 255, 0.15);

  /* Status Colors */
  --warn: #F59E0B;
  --warn-dim: #FEF3C7;
  --danger: #EF4444;
  --danger-dim: #FEE2E2;
  --ok: #10B981;
  --ok-dim: #D1FAE5;

  /* Category Accents */
  --c-finance: #059669;
  --c-finance-dim: #ECFDF5;
  --c-dev: #6366F1;
  --c-dev-dim: #EEF2FF;
  --c-media: #EA580C;
  --c-media-dim: #FFF7ED;
  --c-life: #DB2777;
  --c-life-dim: #FDF2F8;
  --c-utility: #0284C7;
  --c-utility-dim: #F0F9FF;
  --c-home: #0055FF;
  --c-home-dim: #EFF6FF;

  /* Dimensions & Spacing */
  --radius: 16px;
  --radius-sm: 10px;
  --radius-pill: 999px;
  --sidebar-w: 280px;

  /* Elevation Shadows */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.03);
  --shadow-md: 0 4px 12px -2px rgba(15, 23, 42, 0.08), 0 2px 6px -1px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 12px 28px -4px rgba(15, 23, 42, 0.12), 0 4px 12px -2px rgba(15, 23, 42, 0.06);
  --shadow-glow: 0 0 24px var(--brand-glow);
}

[data-theme="dark"] {
  /* Color Palette — Dark Theme */
  --bg: #0B0F19;
  --bg-subtle: #111827;
  --panel: #161F30;
  --panel-2: #1E293B;
  --panel-glass: rgba(22, 31, 48, 0.85);

  --line: #243048;
  --line-subtle: rgba(255, 255, 255, 0.06);
  --line-focus: #60A5FA;

  --text: #F8FAFC;
  --text-secondary: #E2E8F0;
  --muted: #94A3B8;
  --muted-2: #64748B;

  --brand: #3B82F6;
  --brand-2: #60A5FA;
  --brand-dim: rgba(59, 130, 246, 0.15);
  --brand-glow: rgba(59, 130, 246, 0.25);

  --warn: #FBBF24;
  --warn-dim: rgba(245, 158, 11, 0.15);
  --danger: #F87171;
  --danger-dim: rgba(239, 68, 68, 0.15);
  --ok: #34D399;
  --ok-dim: rgba(16, 185, 129, 0.15);

  --c-finance-dim: rgba(5, 150, 105, 0.2);
  --c-dev-dim: rgba(99, 102, 241, 0.2);
  --c-media-dim: rgba(234, 88, 12, 0.2);
  --c-life-dim: rgba(219, 39, 119, 0.2);
  --c-utility-dim: rgba(2, 132, 199, 0.2);
  --c-home-dim: rgba(59, 130, 246, 0.2);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 16px 36px rgba(0, 0, 0, 0.6);
  --shadow-glow: 0 0 28px rgba(59, 130, 246, 0.3);
}

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

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  transition: background-color 0.25s cubic-bezier(0.16, 1, 0.3, 1), color 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  overflow-x: hidden;
}

/* Typography Standards */
h1, h2, h3, h4, h5, h6,
.tool-title,
.card-head,
.tname,
.brand .name,
.hero-minimal h1,
.navcat-label {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  letter-spacing: -0.01em;
  text-rendering: optimizeLegibility;
}

.mono {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
}

.display {
  font-family: 'Sora', sans-serif !important;
}

button, input, select, textarea {
  font-family: inherit;
  color: inherit;
}

a {
  color: var(--brand);
  text-decoration: none;
  transition: color 0.15s ease;
}

a:hover {
  color: var(--brand-2);
}

::selection {
  background: var(--brand);
  color: #FFFFFF;
}

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* RTL Support */
[dir="rtl"] {
  text-align: right;
}