:root {
    
    --af-bg: #0f1720;
    --af-fg: #e6edf3;
    --af-muted: #9fb3c8;
    --af-accent: #b3dfef;      
    --af-border: #003462;      
    --af-code-bg: #00263D;     
    --af-code-fg: #e6edf3;
    --af-surface: #16222e;     
    --af-chrome-bg: #0a1118;   
    --af-rule: #22364a;        
    --af-shadow: rgba(0, 0, 0, 0.45);

    
    --af-hero-bg: #00263D;
    --af-hero-bg-2: #003462;
    --af-hero-fg: #ffffff;
    --af-hero-sub: #b3dfef;
    --af-hero-grid: rgba(179, 223, 239, 0.07);
    --af-hero-cta-bg: #b3dfef;
    --af-hero-cta-fg: #00263D;
    
    --af-chrome-fg: #ffffff;
    --af-chrome-muted: #b3dfef;

    --fw-color-bg: var(--af-bg);
    --fw-color-fg: var(--af-fg);
    --fw-color-muted: var(--af-muted);
    --fw-color-accent: var(--af-accent);
    --fw-color-border: var(--af-border);
    --fw-space-1: 0.25rem;
    --fw-space-2: 0.5rem;
    --fw-space-3: 0.75rem;
    --fw-space-4: 1rem;
    --fw-space-6: 1.5rem;
    --fw-space-8: 2rem;
    --fw-space-12: 3rem;
    --fw-space-16: 4rem;
    --fw-space-24: 6rem;
    --fw-radius-sm: 0.125rem;
    --fw-radius-md: 0.375rem;
    --fw-radius-lg: 0.75rem;

    
    --af-step--1: 0.875rem;
    --af-step-0: 1rem;
    --af-step-1: 1.125rem;
    --af-step-2: 1.375rem;
    --af-step-3: 1.75rem;
    --af-step-4: 2.25rem;
    --af-step-5: 3.5rem;

    --af-container: 75rem;     
    --af-measure: 44rem;       
    --af-measure-wide: 72rem;  
    --af-header-h: 4rem;
    --af-mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
    --af-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
@media (prefers-color-scheme: light) {
    :root {
        --af-bg: #ffffff;
        --af-fg: #212529;      
        --af-muted: #003462;   
        --af-accent: #0078b3;  
        --af-border: #b3dfef;  
        --af-code-bg: #eef6fa;
        --af-code-fg: #00263D;
        --af-surface: #f4f9fc;
        --af-chrome-bg: #00263D;   
        --af-rule: #d5e6ee;
        --af-shadow: rgba(0, 38, 61, 0.12);
    }
}