/* ========================================
   ROCKETCHARTS COLOR THEME
   Edit these variables to change the entire site's colors
   ======================================== */

:root {
    /* ========================================
       PRIMARY BRAND COLORS - EDIT THESE TO CHANGE THEME
       ======================================== */
    --primary-start: #667eea;
    --primary-end: #764ba2;
    /* --primary-start: #161616;
    --primary-end: #646464; */
    /*--accent: #ff4500;  /* Rocket icon color */
    /* --accent: #ff4c00; */
    --accent: #f15a29;
    
    /* ========================================
       BACKGROUND COLORS
       ======================================== */
    --bg-dark: #212529; 
    --bg-gradient: linear-gradient(135deg, var(--primary-start) 0%, var(--primary-end) 100%); 
    --bg-white: #fefefd;
    --bg-card: #f8fafc;
    --bg-light-gray: #f1f5f9;
    --bg-hover: #eef2ff;
    
    /* ========================================
       TEXT COLORS
       ======================================== */
    --text-dark: #000000;
    --text-light: #ffffff;
    --text-muted: #64748b;
    --text-accent: var(--accent);
    
    /* ========================================
       BORDER COLORS
       ======================================== */
    --border-light: #e5e7eb;
    --border-medium: #cbd5e1;
    --border-dark: #94a3b8;
    
    /* ========================================
       FIELD TYPE COLORS
       Used for data type indicators in the fields table
       ======================================== */
    --type-numeric-bg: #dbeafe;
    --type-numeric-text: #1e40af;
    
    --type-datetime-bg: #dcfce7;
    --type-datetime-text: #166534;
    
    --type-categorical-bg: #fed7aa;
    --type-categorical-text: #9a3412;
    
    --type-other-bg: #f3f4f6;
    --type-other-text: #4b5563;
    
    /* ========================================
       MATRIX CHART COLORS (Relationship Quality)
       ======================================== */
    --chart-high: #e0e7ff;      /* Most common */
    --chart-medium: #f0f4ff;    /* Common */
    --chart-low: #f8fafc;       /* Less common */
    --chart-very-low: #ffffff;  /* Rare */
    
    /* ========================================
       BUTTON & INTERACTIVE COLORS
       ======================================== */
    --btn-primary-bg: var(--bg-gradient);
    --btn-hover: rgba(102, 126, 234, 0.15);
    --btn-border: var(--border-medium);
    
    /* ========================================
       ALERT COLORS
       ======================================== */
    --alert-info-bg: #dbeafe;
    --alert-info-text: #1e40af;
    --alert-info-border: #93c5fd;
    
    --alert-success-bg: #f0fdf4;
    --alert-success-text: #166534;
    --alert-success-border: #22c55e;
    
    --alert-error-bg: #fef2f2;
    --alert-error-text: #991b1b;
    --alert-error-border: #ef4444;
    
    --alert-warning-bg: #fef3c7;
    --alert-warning-text: #92400e;
    --alert-warning-border: #fbbf24;
    
    /* ========================================
       SHADOW & EFFECTS
       ======================================== */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 4px 12px rgba(102, 126, 234, 0.15);
    --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.3);
    
    /* ========================================
       FONT SETTINGS
       ======================================== */
    --font-brand: 'Ubuntu Mono', monospace;
    /* --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif; */
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* ========================================
       SELECTION/ACTIVE STATES
       ======================================== */
    --selection-bg: #ffffff;           /* Background for selected items */
    --selection-border: #cbd5e1;       /* Border for selected items */
    --selection-text: var(--text-dark); /* Text color stays the same */
}

/* ========================================
   FORCE LIGHT MODE (Override user preferences)
   ======================================== */
html, body {
    color-scheme: light !important;
    background-color: var(--bg-white) !important;
}
/* 
.hero-space {
  position: relative;
}
.hero-space::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: 
    radial-gradient(2px 2px at 25% 35%, white, transparent),
    radial-gradient(2px 2px at 75% 65%, white, transparent),
    radial-gradient(1px 1px at 45% 25%, white, transparent),
    radial-gradient(1px 1px at 85% 45%, white, transparent),
    radial-gradient(2px 2px at 15% 75%, white, transparent);
  background-size: 300px 300px;
  opacity: 0.4;
  pointer-events: none;
} */