/**
 * Access Land -- Dark Theme CSS Custom Properties
 *
 * All colors defined as CSS variables for easy theming.
 * Dark mode is the default. Light mode (Phase 2) will override via [data-theme="light"].
 */

:root {
    /* Primary */
    --al-primary: #0EA5E9;
    --al-primary-dark: #0284C7;
    --al-primary-light: #38BDF8;

    /* Secondary */
    --al-secondary: #14B8A6;
    --al-secondary-dark: #0D9488;
    --al-secondary-light: #2DD4BF;

    /* Accent */
    --al-accent-gold: #F59E0B;
    --al-accent-success: #10B981;
    --al-accent-warning: #F97316;
    --al-accent-error: #F43F5E;

    /* Backgrounds (Dark Mode) */
    --al-bg-primary: #0B0F1A;
    --al-bg-secondary: #111827;
    --al-bg-tertiary: #1E293B;
    --al-bg-quaternary: #334155;

    /* Text (Dark Mode) */
    --al-text-primary: #F1F5F9;
    --al-text-secondary: #94A3B8;
    --al-text-tertiary: #64748B;
    --al-text-on-primary: #FFFFFF;

    /* Borders */
    --al-border: rgba(255, 255, 255, 0.06);
    --al-border-hover: rgba(255, 255, 255, 0.12);

    /* Shadows */
    --al-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --al-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    --al-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
    --al-shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.6);

    /* Gradients */
    --al-gradient-hero: linear-gradient(135deg, #0EA5E9 0%, #8B5CF6 50%, #EC4899 100%);
    --al-gradient-card-teal: linear-gradient(135deg, #14B8A6 0%, #0F766E 60%, #134E4A 100%);
    --al-gradient-card-blue: linear-gradient(135deg, #0EA5E9 0%, #0369A1 60%, #0C4A6E 100%);
    --al-gradient-card-purple: linear-gradient(135deg, #8B5CF6 0%, #6D28D9 60%, #4C1D95 100%);
    --al-gradient-card-indigo: linear-gradient(135deg, #6366F1 0%, #4338CA 60%, #312E81 100%);
    --al-gradient-cta: linear-gradient(135deg, #0EA5E9 0%, #14B8A6 100%);

    /* Typography */
    --al-font-body: 'Inter', system-ui, -apple-system, sans-serif;
    --al-font-mono: 'JetBrains Mono', 'Courier New', monospace;

    /* Border Radius */
    --al-radius-sm: 6px;
    --al-radius-md: 8px;
    --al-radius-lg: 12px;
    --al-radius-xl: 16px;
    --al-radius-2xl: 20px;
    --al-radius-full: 9999px;

    /* Transitions */
    --al-transition-fast: 0.15s ease;
    --al-transition-normal: 0.2s ease;
    --al-transition-slow: 0.3s ease;
}

/* Phase 2: Light Mode Override */
/*
[data-theme="light"] {
    --al-bg-primary: #F8FAFC;
    --al-bg-secondary: #FFFFFF;
    --al-bg-tertiary: #F1F5F9;
    --al-bg-quaternary: #E2E8F0;
    --al-text-primary: #0F172A;
    --al-text-secondary: #475569;
    --al-text-tertiary: #94A3B8;
    --al-border: #E2E8F0;
    --al-border-hover: #CBD5E1;
    --al-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --al-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
    --al-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
    --al-shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.15);
}
*/

/* Base styles */
body {
    background-color: var(--al-bg-primary);
    color: var(--al-text-primary);
    font-family: var(--al-font-body);
}