/**
 * Core CSS Framework - Base Resets and Variables
 * Matches live site index.css structure
 */

/* ============================================
   CSS RESET
   ============================================ */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* ============================================
   CSS VARIABLES (Light Theme)
   ============================================ */
:root {
    --background: 0 0% 100%;
    --foreground: 0 0% 13%;
    --card: 0 0% 100%;
    --card-foreground: 0 0% 13%;
    --popover: 0 0% 100%;
    --popover-foreground: 0 0% 13%;
    --primary: 0 100% 45%;
    --primary-foreground: 0 0% 100%;
    --secondary: 0 0% 96%;
    --secondary-foreground: 0 0% 13%;
    --muted: 0 0% 96%;
    --muted-foreground: 0 0% 45%;
    --accent: 0 100% 45%;
    --accent-foreground: 0 0% 100%;
    --success: 142 76% 36%;
    --success-foreground: 0 0% 100%;
    --warning: 38 92% 50%;
    --warning-foreground: 0 0% 13%;
    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 100%;
    
    /* Risk Levels */
    --critical: 0 84% 60%;
    --critical-foreground: 0 0% 100%;
    --high: 25 95% 53%;
    --high-foreground: 0 0% 100%;
    --medium: 45 93% 47%;
    --medium-foreground: 0 0% 13%;
    --low: 142 76% 36%;
    --low-foreground: 0 0% 100%;
    --info: 217 91% 60%;
    --info-foreground: 0 0% 100%;
    
    --border: 0 0% 88%;
    --input: 0 0% 88%;
    --ring: 0 100% 45%;
    --radius: 0rem;
    
    --gradient-hero: linear-gradient(180deg, hsl(0 0% 100%) 0%, hsl(0 0% 98%) 100%);
    --gradient-card: none;
    --shadow-glow: none;
    --shadow-card: none;
}

/* ============================================
   BASE STYLES
   ============================================ */
html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
    line-height: 1.5;
    min-height: 100vh;
}

a {
    color: inherit;
    text-decoration: none;
}

/* ============================================
   LAYOUT CONTAINER
   ============================================ */
.container {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    padding-right: 2rem;
    padding-left: 2rem;
}

@media (min-width: 1400px) {
    .container {
        max-width: 1400px;
    }
}

/* ============================================
   TYPOGRAPHY
   ============================================ */
h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    line-height: 1.2;
    color: hsl(var(--foreground));
}

h1 { font-size: 2.25rem; }
h2 { font-size: 1.875rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }
h5 { font-size: 1.125rem; }
h6 { font-size: 1rem; }

p {
    margin-bottom: 1rem;
}

/* ============================================
   UTILITY CLASSES
   ============================================ */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.text-muted {
    color: hsl(var(--muted-foreground));
}

.text-primary {
    color: hsl(var(--primary));
}

.font-medium {
    font-weight: 500;
}

.font-semibold {
    font-weight: 600;
}

.font-bold {
    font-weight: 700;
}

/* ============================================
   SPACING UTILITIES
   ============================================ */
.py-12 {
    padding-top: 3rem;
    padding-bottom: 3rem;
}

.main-content {
    padding-top: 4rem;
}

/* Padding utility (matching live site pt-16) */
.pt-16 {
    padding-top: 4rem;
}