/* ARTATE - Base CSS
 * ==================
 * CSS Variables, Resets, Typography
 */

/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&family=Poppins:wght@300;400;500;600;700&family=Bebas+Neue&display=swap');

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

/* LIGHT MODE (Default) */
:root {
  /* Brand Colors */
  --primary: 354 85% 44%;
  --primary-foreground: 0 0% 100%;
  --primary-hex: #C8102E;

  /* Background & Surface */
  --background: 0 0% 98%;
  --foreground: 0 0% 5%;
  --card: 0 0% 100%;
  --card-foreground: 0 0% 5%;
  --card-border: 0 0% 90%;

  /* UI Elements */
  --muted: 0 0% 94%;
  --muted-foreground: 0 0% 40%;
  --secondary: 0 0% 92%;
  --secondary-foreground: 0 0% 10%;
  --accent: 0 0% 94%;
  --accent-foreground: 0 0% 10%;

  /* Borders & Inputs */
  --border: 0 0% 88%;
  --input: 0 0% 80%;
  --ring: 354 85% 44%;

  /* Destructive */
  --destructive: 0 84% 50%;
  --destructive-foreground: 0 0% 100%;

  /* Button Borders */
  --button-outline: rgba(0, 0, 0, 0.10);
  --badge-outline: rgba(0, 0, 0, 0.05);

  /* Elevation */
  --elevate-1: rgba(0, 0, 0, 0.03);
  --elevate-2: rgba(0, 0, 0, 0.08);

  /* Effects */
  --neon-glow: 0 0 20px rgba(200, 16, 46, 0.5), 0 0 40px rgba(200, 16, 46, 0.3);
  --glass-bg: rgba(255, 255, 255, 0.1);
  --glass-border: rgba(255, 255, 255, 0.2);

  /* Shadows */
  --shadow-xs: 0px 2px 0px 0px hsl(0 0% 0% / 0.03);
  --shadow-sm: 0px 2px 0px 0px hsl(0 0% 0% / 0.04), 0px 1px 2px -1px hsl(0 0% 0% / 0.06);
  --shadow: 0px 2px 0px 0px hsl(0 0% 0% / 0.05), 0px 1px 2px -1px hsl(0 0% 0% / 0.08);
  --shadow-md: 0px 2px 0px 0px hsl(0 0% 0% / 0.06), 0px 2px 4px -1px hsl(0 0% 0% / 0.10);
  --shadow-lg: 0px 2px 0px 0px hsl(0 0% 0% / 0.08), 0px 4px 6px -1px hsl(0 0% 0% / 0.12);
  --shadow-xl: 0px 2px 0px 0px hsl(0 0% 0% / 0.10), 0px 8px 10px -1px hsl(0 0% 0% / 0.15);

  /* Typography */
  --font-sans: 'Poppins', system-ui, -apple-system, sans-serif;
  --font-heading: 'Montserrat', system-ui, sans-serif;
  --font-display: 'Bebas Neue', 'Montserrat', sans-serif;

  /* Spacing & Radius */
  --radius: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.5rem;
}

/* DARK MODE */
.dark {
  /* Background & Surface */
  --background: 0 0% 3%;
  --foreground: 0 0% 98%;
  --card: 0 0% 6%;
  --card-foreground: 0 0% 98%;
  --card-border: 0 0% 10%;

  /* UI Elements */
  --muted: 0 0% 10%;
  --muted-foreground: 0 0% 65%;
  --secondary: 0 0% 12%;
  --secondary-foreground: 0 0% 98%;
  --accent: 0 0% 12%;
  --accent-foreground: 0 0% 98%;

  /* Borders & Inputs */
  --border: 0 0% 12%;
  --input: 0 0% 15%;

  /* Button Borders */
  --button-outline: rgba(255, 255, 255, 0.10);
  --badge-outline: rgba(255, 255, 255, 0.05);

  /* Elevation */
  --elevate-1: rgba(255, 255, 255, 0.04);
  --elevate-2: rgba(255, 255, 255, 0.09);

  /* Effects */
  --neon-glow: 0 0 20px rgba(200, 16, 46, 0.6), 0 0 40px rgba(200, 16, 46, 0.4), 0 0 60px rgba(200, 16, 46, 0.2);
  --glass-bg: rgba(0, 0, 0, 0.6);
  --glass-border: rgba(255, 255, 255, 0.1);

  /* Shadows */
  --shadow-xs: 0px 2px 0px 0px hsl(0 0% 0% / 0.35);
  --shadow-sm: 0px 2px 0px 0px hsl(0 0% 0% / 0.40), 0px 1px 2px -1px hsl(0 0% 0% / 0.45);
  --shadow: 0px 2px 0px 0px hsl(0 0% 0% / 0.45), 0px 1px 2px -1px hsl(0 0% 0% / 0.50);
  --shadow-md: 0px 2px 0px 0px hsl(0 0% 0% / 0.50), 0px 2px 4px -1px hsl(0 0% 0% / 0.55);
  --shadow-lg: 0px 2px 0px 0px hsl(0 0% 0% / 0.55), 0px 4px 6px -1px hsl(0 0% 0% / 0.60);
  --shadow-xl: 0px 2px 0px 0px hsl(0 0% 0% / 0.60), 0px 8px 10px -1px hsl(0 0% 0% / 0.65);
}

/* Base Styles */
html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.2;
}

h1 { font-size: clamp(2rem, 5vw, 4rem); }
h2 { font-size: clamp(1.75rem, 4vw, 3rem); }
h3 { font-size: clamp(1.25rem, 3vw, 1.5rem); }
h4 { font-size: 1.125rem; }

p {
  margin-bottom: 1rem;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  color: hsl(var(--primary));
}

/* Utility Colors */
.text-primary { color: hsl(var(--primary)); }
.text-muted { color: hsl(var(--muted-foreground)); }
.text-foreground { color: hsl(var(--foreground)); }
.text-white { color: #fff; }
.text-black { color: #000; }

.bg-background { background-color: hsl(var(--background)); }
.bg-card { background-color: hsl(var(--card)); }
.bg-primary { background-color: hsl(var(--primary)); }
.bg-muted { background-color: hsl(var(--muted)); }

/* Container */
.container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1rem;
}

@media (min-width: 640px) {
  .container { padding: 0 1.5rem; }
}

@media (min-width: 1024px) {
  .container { padding: 0 2rem; }
}

/* Section Spacing */
.section {
  padding: 5rem 0;
}

@media (min-width: 1024px) {
  .section { padding: 8rem 0; }
}

/* Selection */
::selection {
  background-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: hsl(var(--muted));
}

::-webkit-scrollbar-thumb {
  background: hsl(var(--muted-foreground));
  border-radius: 4px;
}

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

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

/* Screen Reader Only */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}