/* ========================================== */
/* CSS RESET & BASE STYLES                    */
/* ========================================== */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* ================================ */
/* SHOPFLOW DEFAULT THEME */
/* ================================ */
:root {
    /* PRIMARY COLORS */
    --color-primary: #C8102E;              /* Primary Red */
    --color-primary-hover: #9A0C23;        /* Darker Red on hover */
    --color-primary-light: #FFE5E9;        /* Light red tint */
    
    /* SEMANTIC COLORS */
    --color-success: #16a34a;
    --color-warning: #ea580c;
    --color-error: #C8102E;                /* Matches primary for errors */
    --color-info: #0891b2;
    
    /* NEUTRAL GRAYS */
    --color-text-primary: #171717;
    --color-text-secondary: #525252;
    --color-text-tertiary: #a3a3a3;
    --color-border: #e5e5e5;
    --color-background: #ffffff;
    --color-background-secondary: #f5f5f5;
    --color-background-tertiary: #fafafa;
    
    /* PERIOD COLORS */
    --color-period-1: #8b5cf6;
    --color-period-2: #ec4899;
    --color-period-3: #f59e0b;
    --color-period-4: #10b981;
    --color-period-5: #3b82f6;
    --color-period-6: #6366f1;
    --color-period-7: #14b8a6;
    --color-period-8: #f97316;
    --color-period-wildcat: #C8102E;       /* Wildcat period uses school color! */
    
    /* TYPOGRAPHY */
    --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    --font-size-h1: 32px;
    --font-size-h2: 24px;
    --font-size-h3: 18px;
    --font-size-body-large: 16px;
    --font-size-body: 14px;
    --font-size-body-small: 12px;
    --font-size-caption: 11px;
    
    /* SPACING (8px system) */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 12px;
    --space-base: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;
    
    /* SHADOWS - with subtle red tint */
    --shadow-card: 0 1px 3px 0 rgba(200, 16, 46, 0.08), 0 1px 2px -1px rgba(200, 16, 46, 0.06);
    --shadow-card-hover: 0 4px 6px -1px rgba(200, 16, 46, 0.1), 0 2px 4px -2px rgba(200, 16, 46, 0.08);
    --shadow-modal: 0 20px 25px -5px rgba(200, 16, 46, 0.1), 0 8px 10px -6px rgba(200, 16, 46, 0.08);
    
    /* BORDER RADIUS */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-circle: 50%;
    
    /* TOUCH TARGETS */
    --touch-target-min: 44px;
    
    /* TRANSITIONS */
    --transition-fast: 100ms ease-out;
    --transition-base: 200ms ease-out;
    --transition-slow: 300ms ease-out;
}

/* ========================================== */
/* GLOBAL STYLES                              */
/* ========================================== */
body {
    font-family: var(--font-family);
    font-size: var(--font-size-body);
    color: var(--color-text-primary);
    background-color: var(--color-background-secondary);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    line-height: 1.2;
}