:root {
    --contentbg: #ffffff;
    --background: #f6f6f6;
    --bgtint: #e8e8e8;
    --shadow: #0000001a;
    --accent: #10b981;
    --textdark: #1d1b1d;
    --textlight: #19111b;
    --warninglight: #ffeaea;
    --warning: #d73a49;
    --gradient-low: rgb(236, 82, 92);
    --gradient-low-mid: rgb(242, 161, 52);
    --gradient-mid: rgb(224, 228, 10);
    --gradient-mid-high: rgb(88, 225, 24);
    --gradient-high: rgb(0, 185, 55);
}

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

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.6;
    color: var(--textdark);
    background: var(--background);
}

.container {
    max-width: 75rem;
    margin: 0 auto;
    padding: 1rem;
    margin-top: 5rem;
}

/* Typography */
h1 { font-size: 2.5rem; font-weight: 400; }
h2 { color: var(--textdark); font-size: 2rem; font-weight: 400; margin-bottom: 2rem;}
h3 { color: var(--textdark); font-size: 1.5rem; font-weight: 100;}
h4 { color: var(--textdark); font-size: 1.4rem; font-weight: 300; margin-bottom: 1rem; margin-top: 3rem;}
p {  color: var(--textlight); }

/* Responsive Design - Mobile & Tablet */
@media screen and (max-width: 768px) {
    h1 { font-size: 2rem; }
    h2 { font-size: 1.6rem; margin-bottom: 1.5rem; }
    h3 { font-size: 1.3rem; }
    h4 { font-size: 1.2rem; margin-top: 2rem; }

    .container {
        padding: 0.5rem;
        margin-top: 4rem;
    }
}

@media screen and (max-width: 480px) {
    h1 { font-size: 1.7rem; }
    h2 { font-size: 1.4rem; }
    h3 { font-size: 1.1rem; }
    h4 { font-size: 1rem; }
}