/* ===================================
   EFFICIENT DESIGN SYSTEM - SINGLE SCREEN
   =================================== */

:root {
  /* ===================================
     ESSENTIAL COLORS - ONLY WHAT WE USE
     =================================== */

  /* Primary Brand Colors */
  --primary: #86c2eb;
  --primary-dark: #5bace4;
  --primary-light: #b2d8f2;

  /* Neutral Colors - Subtle blue-tinted greys */
  --white: #fafbfc;
  --gray-50: #f5f7fa;
  --gray-100: #eef2f7;
  --gray-200: #e2e8f0;
  --gray-300: #cbd5e1;
  --gray-400: #94a3b8;
  --gray-500: #64748b;
  --gray-600: #475569;
  --gray-700: #334155;
  --gray-800: #1e293b;
  --gray-900: #0f172a;

  /* ===================================
     TYPOGRAPHY - SIMPLIFIED SCALE
     =================================== */

  /* Font Family */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    sans-serif;

  /* Font Sizes - Only what we use */
  --text-xs: 0.75rem; /* 12px */
  --text-sm: 0.875rem; /* 14px */
  --text-base: 1rem; /* 16px */
  --text-lg: 1.125rem; /* 18px */
  --text-xl: 1.25rem; /* 20px */

  /* Font Weights */
  --font-normal: 200;
  --font-medium: 300;
  --font-semibold: 400;
  --font-bold: 500;

  /* ===================================
     SPACING - 8px GRID
     =================================== */

  --space-2: 0.5rem; /* 8px */
  --space-4: 1rem; /* 16px */
  --space-6: 1.5rem; /* 24px */
  --space-8: 2rem; /* 32px */

  /* ===================================
     BORDER RADIUS
     =================================== */

  --radius-xs: 0.05rem; /* 2px */
  --radius-sm: 0.1rem; /* 4px */
  --radius-md: 0.2rem; /* 8px */
  --radius-lg: 0.3rem; /* 12px */

  /* ===================================
     SHADOWS (Apple Human Interface Guidelines)
     =================================== */

  --shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.16);

  /* ===================================
     TRANSITIONS (Moved to animations.css)
     =================================== */

  /* ===================================
     LEGACY COMPATIBILITY - ONLY ESSENTIAL
     =================================== */

  /* Keep only the variables actually used in other CSS files */
  --text-primary: var(--gray-900);
  --text-secondary: var(--gray-600);
  --text-light: var(--gray-500);
  --bg-primary: var(--white);
  --bg-secondary: var(--gray-50);
  --bg-tertiary: var(--gray-100);
  --border-color: var(--gray-200);
  --border-light: var(--gray-200);
  --shadow-light: var(--shadow);
  --shadow-medium: var(--shadow-md);
  --shadow-heavy: var(--shadow-lg);
  --border-radius: var(--radius-md);
  --border-radius-sm: var(--radius-sm);
  --border-radius-md: var(--radius-md);
  --border-radius-lg: var(--radius-lg);
}

/* ===================================
   GLOBAL RESET & BASE STYLES
   =================================== */

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

html {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--font-normal);
  line-height: 1.5;
  color: var(--text-primary);
  background-color: var(--bg-primary);
}

body {
  min-height: 100vh;
  overflow-x: hidden;
}

/* ===================================
   SCROLLBAR STYLING
   =================================== */

::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--bg-secondary);
}

::-webkit-scrollbar-thumb {
  background: var(--primary-light);
  border-radius: var(--radius-sm);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--primary-dark);
}