/* Global styles for all pages
   ============================
   Base typography (h1-h5, p) and layout (.container) defined here.
   Page-specific CSS should NOT override font-size, line-height for these elements.
   Only override colors and page-specific properties.
*/

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@700&display=swap');

:root {
    --accent-vermilion: #FF5710;
    --accent-lime: #B7FF10;
    --accent-candlelight: #FFCF10;
    --accent-cerulean: #10B7FF;
    --accent-violet: #5810FF;
    --calm-manhattan: #FEB79A;
    --dark-whoodsmoke: #18181B;
    --dark-shark: #2D2D34; 
    --dark-tuna: #37373F; 
    --dark-trout: #49495A; 
    --dark-midnight: #022169; 
    --dark-downriver: #0B1D4B;   
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

h1, h2, h3, h4, h5 {
    font-family: 'Sora', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 700;
    line-height: 1.2;
}

h1 {
    font-size: 2.25rem;
}

h2 {
    font-size: 2rem;
}

h3 {
    font-size: 1.5rem;
}

p {
    font-size: 1.1rem;
    line-height: 1.6;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

@media (min-width: 768px) {
    h1 {
        font-size: 2.5rem;
    }
    
    h2 {
        font-size: 2.25rem;
    }
}

@media (min-width: 1024px) {
    h1 {
        font-size: 3rem;
    }
    
    h2 {
        font-size: 2.5rem;
    }
}