/* 
 * Design Tokens from SSOT
 */
:root {
    --color-primary:     #1B6CA8;   /* Medical blue — trust, authority */
    --color-primary-dark:#145086;
    --color-primary-light:#E8F3FC;
    --color-accent:      #F4A225;   /* Warm amber — optimism, CTA */
    --color-accent-dark: #D4891A;
    --color-success:     #27AE60;   /* Normal/healthy status */
    --color-warning:     #E67E22;   /* At risk */
    --color-danger:      #C0392B;   /* Stunting detected */
    --color-bg:          #F8FAFC;   /* Page background */
    --color-surface:     #FFFFFF;   /* Cards, inputs */
    --color-text:        #1A2332;   /* Primary text */
    --color-text-muted:  #6B7A8D;   /* Secondary text */
    --color-border:      #E2E8F0;   /* Borders */

    --font-display:  'Plus Jakarta Sans', sans-serif;
    --font-body:     'Inter', sans-serif;
    --font-mono:     'JetBrains Mono', monospace;

    --radius-sm:   8px;
    --radius-md:   12px;
    --radius-lg:   16px;
    --radius-xl:   24px;
    --radius-full: 9999px;

    --shadow-sm:  0 1px 3px rgba(27,108,168,0.06);
    --shadow-md:  0 4px 16px rgba(27,108,168,0.08);
    --shadow-lg:  0 8px 32px rgba(27,108,168,0.12);

    --transition: 200ms ease;
}

/* Base Reset */
*, *::before, *::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    font-family: var(--font-body);
    background-color: var(--color-bg);
    color: var(--color-text);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.2;
    margin-top: 0;
}

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: var(--transition);
}

a:hover {
    color: var(--color-primary-dark);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Global Layout Utilities */
.container {
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

.section-py {
    padding-top: 5rem;
    padding-bottom: 5rem;
}

@media (max-width: 768px) {
    .section-py {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }
}