/* ==========================================================================
   UIVERSE.IO 1:1 RESET & DESIGN TOKENS (ORIGINAL PALETTE & TYPOGRAPHY)
   ========================================================================== */

@property --border-angle {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0turn;
}

:root {
  /* Core Uiverse Dark Surfaces */
  --bg-body: #070708;
  --bg-surface: #121215;
  --bg-surface-elevated: #17171b;
  --bg-card: #1c1c21;
  --bg-card-stage: #121215;
  --bg-card-light: #e8e8e8;
  --bg-navbar: rgba(7, 7, 8, 0.82);
  --bg-dropdown: rgba(18, 18, 21, 0.96);
  --bg-active: #24242b;
  --bg-hover: #1e1e24;

  /* Structural Borders */
  --border-subtle: #26262c;
  --border-card: #27272d;
  --border-hover: #3f3f48;
  --border-focus: #8b5cf6;

  /* Original Uiverse Gradients (Violet / Indigo / Cyan / Pink) */
  --uiverse-violet: #8b5cf6;
  --uiverse-indigo: #6366f1;
  --uiverse-cyan: #06b6d4;
  --uiverse-pink: #ec4899;
  --uiverse-emerald: #10b981;

  --gradient-primary: linear-gradient(90deg, #6366f1 0%, #8b5cf6 50%, #ec4899 100%);
  --gradient-cyber: linear-gradient(135deg, #6366f1 0%, #a855f7 50%, #06b6d4 100%);
  --gradient-hero-text: linear-gradient(180deg, #ffffff 0%, #a1a1aa 100%);
  --gradient-badge: linear-gradient(90deg, rgba(99, 102, 241, 0.16), rgba(168, 85, 247, 0.16));

  /* Typography Colors */
  --text-primary: #f4f4f6;
  --text-secondary: #a1a1aa;
  --text-muted: #71717a;

  /* Font Stacks */
  --font-heading: 'Montserrat', 'Chivo', 'Plus Jakarta Sans', sans-serif;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-handcrafted: 'Chivo', 'Plus Jakarta Sans', 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Layout Dimensions */
  --navbar-height: 64px;
  --sidebar-width: 275px;
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 9999px;

  /* Shadows & Glows */
  --shadow-dropdown: 0 20px 50px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.06);
  --shadow-card: 0 10px 30px -10px rgba(0, 0, 0, 0.65);
  --glow-violet: 0 0 24px rgba(139, 92, 246, 0.35);

  /* Transitions */
  --ease-snappy: cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast: 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}

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

html {
  color-scheme: dark;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background-color: var(--bg-body);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  min-height: 100vh;
  overflow-x: hidden;
}

button,
input,
select,
textarea {
  font-family: inherit;
  color: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

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

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

::-webkit-scrollbar-thumb {
  background: var(--border-subtle);
  border-radius: 3px;
}

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

/* View Visibility Utility */
.view-section {
  display: none;
}

.view-section.is-active {
  display: block;
}