/* ==========================================================================
   TPDA Design System - Indiaspora-style Clean Light
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800;900&display=swap');

:root {
    --primary: #0C4A87;
    --primary-light: #1066B8;
    --accent: #1D8F4A;
    --accent-orange: #E8732A;
    --red: #D42B2B;

    --text-dark: #1A2332;
    --text-body: #4A5568;
    --text-muted: #7A8599;
    --text-light: #A0ADB8;

    --bg-white: #ffffff;
    --bg-light: #F7F9FC;
    --bg-footer: #F0F1F5;
    --bg-dark: #0F2137;

    --border: #E2E8F0;
    --border-hover: #CBD5E1;

    --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
    --shadow-lg: 0 12px 32px rgba(0,0,0,0.1);

    --radius: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;

    --transition: 0.3s ease;
    --max-width: 1200px;
}

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

html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }

body {
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
    color: var(--text-body);
    background: var(--bg-white);
    line-height: 1.6;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    color: var(--text-dark);
    line-height: 1.2;
    letter-spacing: -0.03em;
}

a { color: inherit; text-decoration: none; transition: color var(--transition); }
img { max-width: 100%; display: block; }
ul, ol { list-style: none; }

::selection { background: rgba(12, 74, 135, 0.12); }

:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }

/* Language */
[data-lang="so"] { display: none; }
html[lang="so"] [data-lang="en"] { display: none; }
html[lang="so"] [data-lang="so"] { display: block; }

.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; }
.hidden { display: none; }

/* Container */
.container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 24px;
}