/**
 * Dremio Design System Tokens
 * Generated from Figma design variables
 */

:root {
  /* Link theme.json presets to legacy tokens for consistency */
  --ds-primary: var(--wp--preset--color--primary, #0052CC);
  --ds-secondary: var(--wp--preset--color--secondary, #2684FF);
  --ds-success: var(--wp--preset--color--success, #00C851);
  --ds-danger: var(--wp--preset--color--danger, #FF3547);
  --ds-warning: var(--wp--preset--color--warning, #FFB300);
  --ds-info: var(--wp--preset--color--info, #33B5E5);
  --ds-light: var(--wp--preset--color--light, #F8F9FA);
  --ds-dark: var(--wp--preset--color--dark, #212529);
  --ds-text: var(--wp--preset--color--dark, #212529);
  --ds-bg: #0C101A;
  /* ==========================================================================
     Color Tokens
     ========================================================================== */
  
  /* Primary Colors */
  --color-teal-400: #31D3DB;
  --color-teal-600: #00ABA4;
  --color-purple-700: #3317AA;
  --color-purple-900: #051344;
  --color-purple-200: #C9C9FF;
  
  /* Blue Palette */
  --color-blue-100: #E0F2FE;
  --color-blue-200: #B9E6FE;
  --color-blue-900: #062C41;
  
  /* Green Palette */
  --color-green-200: #CEEAB0;
  --color-green-900: #2B4212;
  
  /* Neutral Colors */
  --color-neutral-100: #F3F4F6;
  --color-neutral-200: #E5E7EB;
  --color-neutral-300: #D2D6DB;
  --color-neutral-700: #384250;
  
  /* Gray Colors */
  --color-gray-100: #F3F4F6;
  --color-gray-200: #E5E7EB;
  --color-white: #FFFFFF;
  
  /* Slate Colors */
  --color-slate-800: #121723;
  --color-slate-900: #0C101A;
  
  /* Theme Colors */
  --color-body-primary: #212529;
  --color-body-secondary: #6c727f;
  
  /* ==========================================================================
     Typography Tokens
     ========================================================================== */
  
  /* Font Family */
  --font-family-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  
  /* Heading Styles */
  --heading-1-weight: 600;
  --heading-1-size: 40px;
  --heading-1-line-height: 48px;
  
  --heading-2-weight: 500;
  --heading-2-size: 32px;
  --heading-2-line-height: 38px;
  
  --heading-3-weight: 500;
  --heading-3-size: 28px;
  --heading-3-line-height: 32px;
  
  --heading-4-weight: 500;
  --heading-4-size: 24px;
  --heading-4-line-height: 32px;
  
  --heading-5-weight: 500;
  --heading-5-size: 20px;
  --heading-5-line-height: 28px;
  
  /* Body Text Styles */
  --body-lg-weight: 400;
  --body-lg-size: 16px;
  --body-lg-line-height: 24px;
  
  --body-base-weight: 400;
  --body-base-size: 14px;
  --body-base-line-height: 20px;
  
  --body-base-strong-weight: 700;
  
  --body-sm-weight: 400;
  --body-sm-size: 12px;
  --body-sm-line-height: 16px;
  
  --body-sm-initialism-weight: 600;
  
  /* Navigation Styles */
  --nav-link-small-weight: 500;
  --nav-link-small-size: 14px;
  --nav-link-small-line-height: 20px;
  
  --nav-link-extra-small-weight: 500;
  --nav-link-extra-small-size: 12px;
  --nav-link-extra-small-line-height: 16px;
  
  /* Special Styles */
  --subtitle-2-weight: 500;
  --subtitle-2-size: 16px;
  --subtitle-2-line-height: 24px;
  
  --inline-links-weight: 600;
  --inline-links-size: 16px;
  --inline-links-line-height: 1.4;
  
  /* ==========================================================================
     Spacing Tokens
     ========================================================================== */
  
  /* 8px scale */
  --spacing-1: 8px;
  --spacing-base: 8px; /* alias */
  --spacing-2: 12px; /* optional tight */
  --spacing-3: 16px;
  --spacing-4: 24px;
  --spacing-5: 32px;
  --spacing-6: 40px;
  --spacing-7: 48px;
  --spacing-8: 56px;
  
  /* ==========================================================================
     Border Radius Tokens
     ========================================================================== */
  
  --radius-sm: 6px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --border-radius: 8px;
  --border-radius-sm: 6px;
  
  /* ==========================================================================
     Border & Stroke Tokens
     ========================================================================== */
  
  --stroke-sm: 1px;
  --stroke-md: 2px;
  --input-border-width: 1px;
}

/* ==========================================================================
   Typography Classes
   ========================================================================== */

.heading-1 {
  font-family: var(--font-family-primary);
  font-weight: var(--heading-1-weight);
  font-size: var(--heading-1-size);
  line-height: var(--heading-1-line-height);
}

.heading-2 {
  font-family: var(--font-family-primary);
  font-weight: var(--heading-2-weight);
  font-size: var(--heading-2-size);
  line-height: var(--heading-2-line-height);
}

.heading-3 {
  font-family: var(--font-family-primary);
  font-weight: var(--heading-3-weight);
  font-size: var(--heading-3-size);
  line-height: var(--heading-3-line-height);
}

.heading-4 {
  font-family: var(--font-family-primary);
  font-weight: var(--heading-4-weight);
  font-size: var(--heading-4-size);
  line-height: var(--heading-4-line-height);
}

.heading-5 {
  font-family: var(--font-family-primary);
  font-weight: var(--heading-5-weight);
  font-size: var(--heading-5-size);
  line-height: var(--heading-5-line-height);
}

.body-lg {
  font-family: var(--font-family-primary);
  font-weight: var(--body-lg-weight);
  font-size: var(--body-lg-size);
  line-height: var(--body-lg-line-height);
}

.body-base {
  font-family: var(--font-family-primary);
  font-weight: var(--body-base-weight);
  font-size: var(--body-base-size);
  line-height: var(--body-base-line-height);
}

.body-sm {
  font-family: var(--font-family-primary);
  font-weight: var(--body-sm-weight);
  font-size: var(--body-sm-size);
  line-height: var(--body-sm-line-height);
}

.nav-link-small {
  font-family: var(--font-family-primary);
  font-weight: var(--nav-link-small-weight);
  font-size: var(--nav-link-small-size);
  line-height: var(--nav-link-small-line-height);
}

.nav-link-extra-small {
  font-family: var(--font-family-primary);
  font-weight: var(--nav-link-extra-small-weight);
  font-size: var(--nav-link-extra-small-size);
  line-height: var(--nav-link-extra-small-line-height);
}

.subtitle-2 {
  font-family: var(--font-family-primary);
  font-weight: var(--subtitle-2-weight);
  font-size: var(--subtitle-2-size);
  line-height: var(--subtitle-2-line-height);
}

/* ==========================================================================
   Dark Theme Base Styles
   ========================================================================== */

body {
  background: linear-gradient(180deg, var(--color-slate-900) 0%, var(--color-slate-900) 100%);
  color: var(--color-neutral-100);
  font-family: var(--font-family-primary);
}

/* Card styles with glassmorphism */
.card-dark {
  background: rgba(18, 23, 35, 0.8);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--border-radius);
}

/* Button styles */
.btn-primary-gradient {
  background: linear-gradient(135deg, #6B46C1 0%, #4C1D95 100%);
  color: var(--color-white);
  border: none;
  border-radius: var(--radius-sm);
  font-weight: var(--nav-link-small-weight);
  font-size: var(--nav-link-small-size);
  padding: 10px 20px;
  transition: all 0.2s ease;
}

.btn-primary-gradient:hover {
  background: linear-gradient(135deg, #7C3AED 0%, #5B21B6 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(107, 70, 193, 0.4);
}