/* Geist Design System - Base Styles */
/* Unified typography, colors, and spacing for consistency */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ========================================
   DESIGN TOKENS
   ======================================== */

:root {
    /* Colors */
    --geist-foreground: #000;
    --geist-background: #fafafa;  /* Changed from pure white for better contrast */
    --geist-card-background: #ffffff;
    --geist-card-border: #eaeaea;
    
    /* Grays */
    --geist-gray-100: #f5f5f5;
    --geist-gray-200: #eaeaea;
    --geist-gray-300: #ddd;
    --geist-gray-400: #999;
    --geist-gray-500: #777;
    --geist-gray-600: #555;
    --geist-gray-700: #333;
    --geist-gray-800: #222;
    
    /* Semantic Colors */
    --geist-success: #0070f3;
    --geist-success-light: #e6f4ff;
    --geist-error: #e00;
    --geist-error-light: #fee2e2;
    --geist-warning: #f5a623;
    --geist-warning-light: #fef3c7;
    --geist-info: #0070f3;
    
    /* Typography Scale */
    --font-size-xs: 12px;
    --font-size-sm: 14px;
    --font-size-base: 16px;
    --font-size-lg: 18px;
    --font-size-xl: 20px;
    --font-size-2xl: 24px;
    --font-size-3xl: 28px;
    --font-size-4xl: 32px;
    
    /* Line Heights */
    --line-height-tight: 1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;
    
    /* Spacing */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    
    /* Border Radius */
    --radius-sm: 4px;
    --radius-base: 6px;
    --radius-lg: 8px;
    --radius-xl: 12px;
    
    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-base: 0 1px 3px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
    
    /* Font Family */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, monospace;
}

/* ========================================
   GLOBAL STYLES
   ======================================== */

body {
    font-family: var(--font-sans) !important;
    font-size: var(--font-size-base) !important;
    line-height: var(--line-height-normal) !important;
    color: var(--geist-foreground) !important;
    background-color: var(--geist-background) !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

/* Main content area */
.main-content {
    background-color: var(--geist-background) !important;
}

/* ========================================
   TYPOGRAPHY
   ======================================== */

/* Headings */
h1, .h1 {
    font-size: var(--font-size-3xl) !important;
    font-weight: 700 !important;
    line-height: var(--line-height-tight) !important;
    letter-spacing: -0.02em !important;
    margin-bottom: var(--space-6) !important;
}

h2, .h2 {
    font-size: var(--font-size-2xl) !important;
    font-weight: 600 !important;
    line-height: var(--line-height-tight) !important;
    letter-spacing: -0.01em !important;
}

h3, .h3 {
    font-size: var(--font-size-xl) !important;
    font-weight: 600 !important;
    line-height: var(--line-height-tight) !important;
}

h4, .h4 {
    font-size: var(--font-size-lg) !important;
    font-weight: 600 !important;
}

h5, .h5 {
    font-size: var(--font-size-base) !important;
    font-weight: 600 !important;
}

h6, .h6 {
    font-size: var(--font-size-sm) !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.02em !important;
}

/* Body Text */
p, .text-base {
    font-size: var(--font-size-base) !important;
    line-height: var(--line-height-normal) !important;
}

.text-sm {
    font-size: var(--font-size-sm) !important;
}

.text-xs {
    font-size: var(--font-size-xs) !important;
}

.text-lg {
    font-size: var(--font-size-lg) !important;
}

/* Labels */
label, .form-label {
    font-size: var(--font-size-sm) !important;
    font-weight: 500 !important;
    color: var(--geist-gray-700) !important;
    margin-bottom: var(--space-2) !important;
}

/* ========================================
   CARDS
   ======================================== */

.card {
    background: var(--geist-card-background) !important;
    border: 1px solid var(--geist-card-border) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-sm) !important;
    margin-bottom: var(--space-5) !important;
    transition: box-shadow 0.15s ease !important;
}

.card:hover {
    box-shadow: var(--shadow-md) !important;
}

.card-header {
    background: var(--geist-card-background) !important;
    border-bottom: 1px solid var(--geist-gray-200) !important;
    padding: var(--space-4) var(--space-5) !important;
}

.card-body {
    padding: var(--space-5) !important;
    background: var(--geist-card-background) !important;
}

.card-title {
    font-size: var(--font-size-base) !important;
    font-weight: 600 !important;
    margin: 0 !important;
}

/* ========================================
   TABLES
   ======================================== */

.table {
    font-size: var(--font-size-sm) !important;
}

.table thead th {
    background-color: var(--geist-gray-100) !important;
    border: none !important;
    border-bottom: 1px solid var(--geist-gray-200) !important;
    color: var(--geist-gray-600) !important;
    font-weight: 500 !important;
    font-size: var(--font-size-xs) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.02em !important;
    padding: var(--space-3) var(--space-4) !important;
}

.table tbody td {
    border: none !important;
    border-bottom: 1px solid var(--geist-gray-200) !important;
    padding: var(--space-4) !important;
    font-size: var(--font-size-sm) !important;
    vertical-align: middle !important;
}

.table tbody tr:hover {
    background-color: var(--geist-gray-100) !important;
}

/* ========================================
   BUTTONS
   ======================================== */

.btn {
    font-family: var(--font-sans) !important;
    font-size: var(--font-size-sm) !important;
    font-weight: 500 !important;
    padding: var(--space-2) var(--space-4) !important;
    border-radius: var(--radius-base) !important;
    transition: all 0.15s ease !important;
    border: 1px solid transparent !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: var(--space-2) !important;
}

.btn-sm {
    font-size: var(--font-size-xs) !important;
    padding: var(--space-1) var(--space-3) !important;
}

.btn-lg {
    font-size: var(--font-size-base) !important;
    padding: var(--space-3) var(--space-5) !important;
}

.btn-primary {
    background-color: var(--geist-foreground) !important;
    color: var(--geist-card-background) !important;
    border-color: var(--geist-foreground) !important;
}

.btn-primary:hover {
    background-color: var(--geist-gray-700) !important;
    border-color: var(--geist-gray-700) !important;
    transform: translateY(-1px) !important;
}

/* ========================================
   FORMS
   ======================================== */

.form-control,
.form-select {
    font-size: var(--font-size-sm) !important;
    padding: var(--space-2) var(--space-3) !important;
    border: 1px solid var(--geist-gray-200) !important;
    border-radius: var(--radius-base) !important;
    background-color: var(--geist-card-background) !important;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--geist-foreground) !important;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1) !important;
}

/* ========================================
   UTILITY CLASSES
   ======================================== */

/* Remove Bootstrap's color utilities */
.text-primary { color: var(--geist-foreground) !important; }
.text-secondary { color: var(--geist-gray-600) !important; }
.text-success { color: var(--geist-success) !important; }
.text-danger { color: var(--geist-error) !important; }
.text-warning { color: var(--geist-warning) !important; }
.text-info { color: var(--geist-info) !important; }
.text-muted { color: var(--geist-gray-500) !important; }

/* Background utilities */
.bg-light { background-color: var(--geist-gray-100) !important; }
.bg-white { background-color: var(--geist-card-background) !important; }

/* Border utilities */
.border { border-color: var(--geist-gray-200) !important; }

/* ========================================
   DARK MODE
   ======================================== */

[data-theme="dark"] {
    --geist-foreground: #fff;
    --geist-background: #000;
    --geist-card-background: #111;
    --geist-card-border: #333;
    
    --geist-gray-100: #1a1a1a;
    --geist-gray-200: #333;
    --geist-gray-300: #444;
    --geist-gray-400: #666;
    --geist-gray-500: #888;
    --geist-gray-600: #999;
    --geist-gray-700: #ccc;
    --geist-gray-800: #eee;
}