/* =============================================================================
   CSS Variables / Design Tokens
   =============================================================================
   This file contains all design tokens for the PAI Theme.
   Edit these values to customize the theme's appearance.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   Color Palette - Dark Mode (Default)
   ----------------------------------------------------------------------------- */
:root {
    /* Base Colors */
    --bg-color: #0a0a0a;           /* obsidian - main background */
    --bg-secondary: #171717;        /* jet/ebony - secondary background */
    --bg-card: #171717;             /* card backgrounds */
    --bg-accent: rgba(255, 255, 255, 0.05);
    --bg-accent-hover: rgba(255, 255, 255, 0.08);
    
    /* Text Colors */
    --text-color: #fafafa;          /* primary text */
    --text-muted: #a3a3a3;          /* muted/secondary text */
    --text-light: #737373;          /* light text */
    
    /* Primary / Brand Colors */
    --primary-color: #fafafa;
    --primary-hover: #ffffff;
    
    /* Secondary Colors */
    --secondary-color: #1a1a1a;     /* ebony */
    --secondary-hover: #1f1f1f;
    
    /* Accent Blue - Used in docs, dictionary, code blocks */
    --accent-blue: 59, 130, 246;    /* RGB values for rgba() usage */
    --accent-bg-card: rgba(var(--accent-blue), 0.08);
    --accent-bg-secondary: rgba(var(--accent-blue), 0.12);
    --accent-bg-light: rgba(var(--accent-blue), 0.025);
    --accent-bg-code: rgba(var(--accent-blue), 0.06);
    --accent-bg-inline-code: rgba(var(--accent-blue), 0.1);
    
    /* Border Colors */
    --border-color: rgba(255, 255, 255, 0.1);
    --border-hover: rgba(255, 255, 255, 0.15);
    --charcoal: rgba(255, 255, 255, 0.1);
    --ebony: #1a1a1a;               /* button backgrounds */
}

/* -----------------------------------------------------------------------------
   Color Palette - Light Mode
   ----------------------------------------------------------------------------- */
[data-theme="light"] {
    --bg-color: #ffffff;
    --bg-secondary: #fafafa;
    --bg-card: #ffffff;
    --bg-accent: rgba(0, 0, 0, 0.05);
    --bg-accent-hover: rgba(0, 0, 0, 0.08);
    
    --text-color: #0a0a0a;
    --text-muted: #737373;
    --text-light: #a3a3a3;
    
    --primary-color: #0a0a0a;
    --primary-hover: #000000;
    
    --secondary-color: #f5f5f5;
    --secondary-hover: #e5e5e5;
    
    --border-color: rgba(0, 0, 0, 0.1);
    --border-hover: rgba(0, 0, 0, 0.15);
}

/* -----------------------------------------------------------------------------
   Typography
   ----------------------------------------------------------------------------- */
/* Airoman heading font */
@font-face {
    font-family: 'Airoman';
    src: url('/fonts/Airoman.woff2') format('woff2'),
         url('/fonts/Airoman.otf') format('opentype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

:root {
    --font-family: 'Inter', system-ui, -apple-system, sans-serif;
    --font-family-heading: 'Airoman', system-ui, -apple-system, sans-serif;
    --font-family-mono: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    --font-family-handwriting: 'Caveat', cursive;
}

/* -----------------------------------------------------------------------------
   Layout & Spacing
   ----------------------------------------------------------------------------- */
:root {
    --container-width: 1280px;
    --header-height: 72px;
    --header-top-margin: 1.5rem;
    --radius: 8px;
    --radius-sm: 4px;
    --radius-lg: 12px;
}

/* -----------------------------------------------------------------------------
   Transitions & Animations
   ----------------------------------------------------------------------------- */
:root {
    --transition: all 0.2s ease;
    --transition-fast: all 0.1s ease;
    --transition-slow: all 0.3s ease;
}

/* -----------------------------------------------------------------------------
   Shadows
   ----------------------------------------------------------------------------- */
:root {
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
}

[data-theme="light"] {
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

/* -----------------------------------------------------------------------------
   Gradients - Hero & Accent
   ----------------------------------------------------------------------------- */
:root {
    --gradient-hero: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(120, 119, 198, 0.08), transparent);
    --gradient-card: radial-gradient(ellipse 80% 50% at 50% 120%, rgba(120, 119, 198, 0.08), transparent);
    --gradient-footer: radial-gradient(ellipse 100% 60% at 50% 100%, rgba(120, 119, 198, 0.05), transparent);
    
    /* Accent gradients */
    --gradient-accent-1: radial-gradient(ellipse 100% 100% at 20% 30%, rgba(120, 119, 198, 0.01), transparent);
    --gradient-accent-2: radial-gradient(ellipse 120% 100% at 80% 70%, rgba(139, 92, 246, 0.008), transparent);
    --gradient-accent-3: radial-gradient(ellipse 100% 120% at 10% 80%, rgba(99, 102, 241, 0.008), transparent);
    --gradient-accent-4: radial-gradient(ellipse 120% 100% at 90% 20%, rgba(168, 85, 247, 0.006), transparent);
}

[data-theme="light"] {
    --gradient-hero: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(120, 119, 198, 0.1), transparent);
    --gradient-card: radial-gradient(ellipse 80% 50% at 50% 120%, rgba(120, 119, 198, 0.1), transparent);
    --gradient-footer: radial-gradient(ellipse 100% 60% at 50% 100%, rgba(120, 119, 198, 0.15), transparent);
}

/* -----------------------------------------------------------------------------
   Dashboard Gradients
   ----------------------------------------------------------------------------- */
:root {
    --gradient-dashboard-1: radial-gradient(ellipse 150% 100% at 15% 25%, rgba(120, 119, 198, 0.02), transparent 60%);
    --gradient-dashboard-2: radial-gradient(ellipse 120% 150% at 85% 75%, rgba(157, 156, 255, 0.015), transparent 65%);
    --gradient-dashboard-3: radial-gradient(ellipse 100% 120% at 50% 50%, rgba(120, 119, 198, 0.01), transparent 70%);
    --gradient-dashboard-4: linear-gradient(135deg, rgba(120, 119, 198, 0.008) 0%, transparent 40%, rgba(157, 156, 255, 0.006) 100%);
    --gradient-dashboard-5: radial-gradient(ellipse 140% 100% at 70% 20%, rgba(139, 92, 246, 0.012), transparent 60%);
    --gradient-dashboard-6: radial-gradient(ellipse 100% 140% at 30% 80%, rgba(99, 102, 241, 0.01), transparent 65%);
}

/* -----------------------------------------------------------------------------
   Background CSS Gradients
   ----------------------------------------------------------------------------- */
:root {
    --bg-css-1: radial-gradient(ellipse 180% 120% at 10% 15%, rgba(120, 119, 198, 0.002), transparent 70%);
    --bg-css-2: radial-gradient(ellipse 140% 180% at 90% 85%, rgba(157, 156, 255, 0.0015), transparent 75%);
    --bg-css-3: radial-gradient(ellipse 120% 100% at 50% 50%, rgba(120, 119, 198, 0.001), transparent 80%);
    --bg-css-4: radial-gradient(ellipse 160% 100% at 25% 40%, rgba(139, 92, 246, 0.0015), transparent 72%);
    --bg-css-5: radial-gradient(ellipse 100% 160% at 75% 60%, rgba(99, 102, 241, 0.001), transparent 78%);
    --bg-css-6: linear-gradient(180deg, rgba(120, 119, 198, 0.003) 0%, transparent 25%, transparent 75%, rgba(157, 156, 255, 0.0025) 100%);
    --bg-css-7: radial-gradient(ellipse 200% 80% at 50% 5%, rgba(120, 119, 198, 0.004), transparent 60%);
    --bg-css-8: radial-gradient(ellipse 200% 80% at 50% 95%, rgba(157, 156, 255, 0.0035), transparent 60%);
    --bg-css-9: radial-gradient(ellipse 150% 100% at 60% 30%, rgba(139, 92, 246, 0.001), transparent 75%);
    --bg-css-10: radial-gradient(ellipse 100% 150% at 40% 70%, rgba(168, 85, 247, 0.0012), transparent 73%);
    --bg-css-11: linear-gradient(45deg, rgba(120, 119, 198, 0.0008) 0%, transparent 50%, rgba(157, 156, 255, 0.0006) 100%);
    --bg-css-12: linear-gradient(225deg, rgba(139, 92, 246, 0.0008) 0%, transparent 50%, rgba(99, 102, 241, 0.001) 100%);
    
    /* Header & Footer accents */
    --bg-css-header: radial-gradient(ellipse 300% 80% at 50% 0%, rgba(120, 119, 198, 0.08), transparent 50%);
    --bg-css-footer: radial-gradient(ellipse 300% 80% at 50% 100%, rgba(157, 156, 255, 0.07), transparent 50%);
}

/* -----------------------------------------------------------------------------
   Image Background Gradients
   ----------------------------------------------------------------------------- */
:root {
    --image-bg-css-1: radial-gradient(ellipse 120% 120% at 0% 0%, rgba(120, 119, 198, 0.012), transparent 60%);
    --image-bg-css-2: radial-gradient(ellipse 100% 100% at 10% 10%, rgba(157, 156, 255, 0.008), transparent 65%);
    --image-bg-css-3: linear-gradient(to bottom, rgba(120, 119, 198, 0.025) 0%, transparent 20%, transparent 60%, rgba(139, 92, 246, 0.030) 100%);
    --image-bg-css-4: radial-gradient(ellipse 150% 80% at 100% 100%, rgba(120, 119, 198, 0.035), transparent 50%);
    --image-bg-css-5: radial-gradient(ellipse 140% 70% at 95% 95%, rgba(157, 156, 255, 0.028), transparent 55%);
    --image-bg-css-6: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.15) 40%, rgba(0, 0, 0, 0.20) 60%, transparent 100%);
    --image-bg-css-7: radial-gradient(ellipse 200% 200% at 50% 50%, rgba(0, 0, 0, 0.12), transparent 70%);
    --image-bg-css-8: linear-gradient(135deg, rgba(120, 119, 198, 0.006) 0%, transparent 25%, transparent 100%);
    --image-bg-css-9: radial-gradient(ellipse 80% 80% at 5% 5%, rgba(139, 92, 246, 0.010), transparent 70%);
    --image-bg-css-10: linear-gradient(to bottom right, transparent 0%, transparent 70%, rgba(120, 119, 198, 0.020) 90%, rgba(139, 92, 246, 0.025) 100%);
    --image-bg-css-11: radial-gradient(ellipse 180% 60% at 100% 100%, rgba(157, 156, 255, 0.022), transparent 60%);
    --image-bg-css-12: radial-gradient(ellipse 250% 250% at 50% 50%, rgba(0, 0, 0, 0.10), transparent 75%);
}