/* ══════════════════════════════════════════
   ElektroGH.wien – Admin Panel v4
   HubSpot-inspired, mobile-first
   ══════════════════════════════════════════ */

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

:root {
  --admin-sidebar: 256px;
  --admin-sidebar-collapsed: 64px;
  --admin-topbar: 56px;
  --admin-bottomnav: 60px;

  /* Core palette */
  --brand: #f0b429;
  --brand-dim: #d9a01e;
  --brand-glow: rgba(240, 180, 41, 0.12);
  --brand-ink: #16140f;
  --brand-subtle: rgba(240, 180, 41, 0.08);

  /* Surfaces */
  --bg-root: #0f1117;
  --bg-sidebar: #0b0d12;
  --bg-main: #f4f5f7;
  --bg-card: #ffffff;
  --bg-card-hover: #f8f9fb;
  --bg-input: #f5f6f9;
  --bg-modal-overlay: rgba(10, 12, 16, 0.6);
  --bg-elevated: #ffffff;

  /* Borders */
  --border: #e3e6eb;
  --border-subtle: #eef0f3;
  --border-sidebar: rgba(255,255,255,0.06);

  /* Text */
  --text-primary: #111318;
  --text-secondary: #5f6577;
  --text-tertiary: #8b90a0;
  --text-inverse: #ffffff;
  --text-sidebar: rgba(255,255,255,0.5);
  --text-sidebar-hover: rgba(255,255,255,0.82);
  --text-sidebar-active: #ffffff;

  /* Semantic */
  --success: #10b981;
  --success-bg: #ecfdf5;
  --warning: #f59e0b;
  --warning-bg: #fffbeb;
  --danger: #ef4444;
  --danger-bg: #fef2f2;
  --info: #3b82f6;
  --info-bg: #eff6ff;
  --purple: #8b5cf6;
  --purple-bg: #f5f3ff;
  --yellow: #f0b429;
  --yellow-light: #fff8e6;

  /* Radius */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-full: 9999px;

  /* Shadows */
  --sh-xs: 0 1px 2px rgba(0,0,0,0.05);
  --sh-sm: 0 1px 4px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --sh-md: 0 4px 20px rgba(0,0,0,0.08);
  --sh-lg: 0 16px 48px rgba(0,0,0,0.12);
  --sh-card: 0 1px 4px rgba(0,0,0,0.05), 0 0 0 1px rgba(0,0,0,0.015);
  --sh-card-hover: 0 8px 24px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.03);

  /* Fonts */
  --font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: 'JetBrains Mono', 'DM Mono', 'Fira Code', monospace;

  /* Compat aliases (used in inline styles) */
  --bg-secondary: var(--bg-input);
  --radius: var(--r-sm);
  --black: #16140f;
  --white: #ffffff;
  --primary: var(--brand);
  --bg-primary: var(--brand-glow);
  --bg-tertiary: #eef0f3;

  /* Transitions */
  --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* Z-index scale */
  --z-dropdown: 200;
  --z-sticky: 400;
  --z-modal-overlay: 1000;
  --z-modal: 1100;
  --z-toast: 2000;
  --z-tooltip: 9999;
  --z-topmost: 10000;

  /* Animation timing */
  --timing-fast: 0.15s;
  --timing-normal: 0.25s;
  --timing-slow: 0.4s;
}

/* ──────────── BASE ──────────── */
body {
  font-family: var(--font);
  background: var(--bg-root);
  color: var(--text-primary);
  min-height: 100vh;
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }

/* Focus ring utility */
:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}