/* ClearAudit Styles
 * 
 * Design tokens and custom styles.
 * Easy to swap colors, fonts, and effects.
 */

/* ============================================
   DESIGN TOKENS - Change these to rebrand
   ============================================ */

:root {
    /* Colors */
    --color-navy: #0a1628;
    --color-slate: #1e293b;
    --color-accent: #3b82f6;
    --color-accent-hover: #2563eb;
    --color-muted: #64748b;
    --color-surface: #f8fafc;
    --color-white: #ffffff;
    --color-success: #22c55e;
    
    /* Typography */
    --font-sans: 'DM Sans', system-ui, sans-serif;
    --font-display: 'DM Serif Display', Georgia, serif;
    
    /* Spacing */
    --nav-height: 72px;
    
    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-medium: 0.3s ease;
}

/* ============================================
   BASE STYLES
   ============================================ */

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
}

/* ============================================
   GRADIENTS
   ============================================ */

.gradient-text {
    background: linear-gradient(135deg, var(--color-accent) 0%, #1d4ed8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-gradient {
    background: linear-gradient(180deg, var(--color-navy) 0%, var(--color-slate) 100%);
}

/* ============================================
   ANIMATIONS
   ============================================ */

.card-hover {
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.card-hover:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px -8px rgba(0, 0, 0, 0.15);
}

.fade-in {
    animation: fadeIn 0.6s ease-out forwards;
    opacity: 0;
    transform: translateY(20px);
}

@keyframes fadeIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.2s; }
.delay-3 { animation-delay: 0.3s; }
.delay-4 { animation-delay: 0.4s; }

/* ============================================
   PATTERNS
   ============================================ */

.subtle-grid {
    background-image: 
        linear-gradient(rgba(59, 130, 246, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(59, 130, 246, 0.03) 1px, transparent 1px);
    background-size: 48px 48px;
}