/* Global CSS Variables - Professional 2025 */

:root {
  /* Typography */
  --font-primary: "SF Pro", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* Colors - Text */
  --color-text-primary: #FFFFFF;
  --color-text-secondary: rgba(255, 255, 255, 0.48);
  --color-text-tertiary: rgba(255, 255, 255, 0.32);
  --color-text-disabled: #7D7D7D;
  --color-text-placeholder: #78797E;

  /* Colors - Background */
  --color-bg-primary: #171717;
  --color-bg-secondary: #1D1D1D;
  --color-bg-tertiary: rgba(81, 81, 81, 0.12);
  --color-bg-overlay: rgba(23, 23, 23, 0.95);

  /* Colors - Borders */
  --color-border-primary: rgba(255, 255, 255, 0.04);
  --color-border-secondary: rgba(255, 255, 255, 0.03);
  --color-border-active: #FFFFFF;

  /* Colors - Accent */
  --color-green: #32E55E;
  --color-red: #E53935;
  --color-green-bg: rgba(50, 229, 94, 0.16);
  --color-red-bg: rgba(229, 57, 53, 0.16);

  /* Effects - Glow */
  --glow-white: 0 0 4px #FFFFFF, 0 0 8px rgba(255, 255, 255, 0.5);

  /* Spacing - Navigation */
  --nav-base-height: 58px;

  /* Effects - Blur */
  --blur-medium: blur(16px);
  --blur-strong: blur(80px);

  /* Transitions */
  --transition-fast: 0.15s;
  --transition-normal: 0.2s;
  --transition-medium: 0.3s;

  /* Border Radius */
  --radius-small: 8px;
  --radius-medium: 12px;
  --radius-large: 16px;
}

/* Reset & Base Styles */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-primary);
  color: var(--color-text-primary);
  background: var(--color-bg-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}