/* Velora Luxe - Premium Design System */

:root {
  /* === BRAND PALETTE === */
  --brand-950: #0d0f12;
  --brand-900: #111317;
  --brand-800: #171a21;
  --brand-700: #1e232b;
  --brand-600: #2a303a;
  --brand-500: #3a4250;
  --brand-400: #4a5568;
  --brand-300: #718096;
  --brand-200: #a0aec0;
  --brand-100: #e2e8f0;
  --brand-50: #f7fafc;

  /* === ACCENT COLORS === */
  --accent-500: #d4af37; /* Velora Gold */
  --accent-600: #c29c23;
  --accent-700: #a8841b;
  --accent-400: #e6c85a;
  --accent-300: #f0d98a;
  --accent-200: #f5e6b8;
  --accent-100: #faf3d6;
  --accent-50: #fdf9ed;

  /* === SEMANTIC COLORS === */
  --success-500: #10b981;
  --success-600: #059669;
  --success-700: #047857;
  --warning-500: #f59e0b;
  --warning-600: #d97706;
  --warning-700: #b45309;
  --error-500: #ef4444;
  --error-600: #dc2626;
  --error-700: #b91c1c;
  --info-500: #3b82f6;
  --info-600: #2563eb;
  --info-700: #1d4ed8;

  /* === DARK THEME SURFACES === */
  --bg: #0f1115;
  --bg-soft: #141821;
  --panel: #1b2130;
  --card: #161b24;
  --elevated: #1e2430;
  --overlay: rgba(15, 17, 21, 0.8);

  /* === DARK THEME TEXT === */
  --fg: #e9eef6;
  --muted: #a6b0c3;
  --subtle: #8a95a9;
  --disabled: #6b7280;

  /* === DARK THEME BORDERS === */
  --line: #2a3242;
  --line-soft: #3a4250;
  --line-strong: #1a1f2e;
  --ring: #d4af37;
  --ring-soft: rgba(212, 175, 55, 0.2);

  /* === SPACING SCALE === */
  --space-px: 1px;
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-8: 48px;
  --space-10: 64px;
  --space-12: 80px;
  --space-16: 128px;
  --space-20: 160px;
  --space-24: 192px;

  /* === BORDER RADIUS === */
  --radius-none: 0;
  --radius-sm: 6px;
  --radius: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-2xl: 36px;
  --radius-3xl: 48px;
  --radius-pill: 999px;
  --radius-full: 50%;

  /* === SHADOWS === */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 6px 12px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.04);
  --shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.25);
  --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.06);
  --elev: 0 6px 20px rgba(0, 0, 0, 0.25);

  /* === TYPOGRAPHY SCALE === */
  --t-xs: 12px;
  --t-sm: 14px;
  --t-md: 16px;
  --t-lg: 18px;
  --t-xl: 22px;
  --t-2xl: 28px;
  --t-3xl: 36px;
  --t-4xl: 48px;
  --t-5xl: 60px;
  --t-6xl: 72px;

  /* === LINE HEIGHTS === */
  --leading-none: 1;
  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --leading-loose: 2;

  /* === FONT WEIGHTS === */
  --font-thin: 100;
  --font-light: 300;
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-extrabold: 800;
  --font-black: 900;

  /* === MOTION === */
  --dur-1: 120ms;
  --dur-2: 180ms;
  --dur-3: 240ms;
  --dur-4: 300ms;
  --dur-5: 500ms;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);

  /* === Z-INDEX SCALE === */
  --z-0: 0;
  --z-10: 10;
  --z-20: 20;
  --z-30: 30;
  --z-40: 40;
  --z-50: 50;
  --z-auto: auto;
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
  --z-toast: 1080;

  /* === CONTAINER SIZES === */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
  --container-2xl: 1440px;

  /* === BREAKPOINTS === */
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;

  /* === FOCUS RINGS === */
  --ring-width: 2px;
  --ring-offset-width: 2px;
  --ring-offset-color: var(--bg);
  --ring-color: var(--ring);
  --ring-opacity: 0.5;

  /* === BACKDROP BLUR === */
  --backdrop-blur-sm: blur(4px);
  --backdrop-blur: blur(8px);
  --backdrop-blur-md: blur(12px);
  --backdrop-blur-lg: blur(16px);
  --backdrop-blur-xl: blur(24px);
;}

/* Light theme removed - using dark theme only */

/* === REDUCED MOTION === */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-1: 0ms;
    --dur-2: 0ms;
    --dur-3: 0ms;
    --dur-4: 0ms;
    --dur-5: 0ms;
  }
}

/* === PRINT STYLES === */
@media print {
  :root {
    --shadow-xs: none;
    --shadow-sm: none;
    --shadow: none;
    --shadow-md: none;
    --shadow-lg: none;
    --shadow-xl: none;
    --shadow-2xl: none;
    --shadow-inner: none;
    --elev: none;
  }
}

/* === GLOBAL RESET === */
*,
*::before,
*::after {
  box-sizing: border-box;
;}

html {
  scroll-behavior: smooth;
;}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  line-height: var(--leading-normal);
  color: var(--fg);
  background-color: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
;}

/* === FOCUS MANAGEMENT === */
:focus {
  outline: none;
;}

:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
;}

/* === SELECTION === */
::selection {
  background-color: var(--accent-200);
  color: var(--brand-900);
;}

/* === SCROLLBAR STYLING === */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
;}

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

::-webkit-scrollbar-thumb {
  background: var(--line);
  border-radius: var(--radius-pill);
;}

::-webkit-scrollbar-thumb:hover {
  background: var(--line-soft);
;}