@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap');
@import url('https://api.fontshare.com/v2/css?f[]=clash-display@300,400,500,600,700&display=swap');

:root {
  /* Color System */
  --primary: #FF6A00;
  --secondary: #FFB300;
  --accent: #E53935;
  --dark: #050505;
  --dark-surface: #0B0B0B;
  --dark-border: rgba(255, 255, 255, 0.1);
  --white: #FFFFFF;
  --gray-100: #F5F5F5;
  --gray-400: #A3A3A3;
  --gray-600: #525252;
  
  /* Font Families */
  --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-display: 'Clash Display', var(--font-sans);
  
  /* Transition Constants */
  --ease-custom: cubic-bezier(0.32, 0.72, 0, 1);
  --duration-custom: 700ms;
}

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

body {
  font-family: var(--font-sans);
  background-color: var(--dark);
  color: var(--white);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* Custom Selection style */
::selection {
  background-color: var(--primary);
  color: var(--white);
}

/* Base scrollbar styling */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: var(--dark);
}
::-webkit-scrollbar-thumb {
  background: var(--dark-surface);
  border: 2px solid var(--dark);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--primary);
}