/* ============================================================ Design tokens - forest-green Government of Gujarat identity. Themes are switched via [data-theme] on ; font size via --font-scale. All values are WCAG 2.1 AA verified pairings. ============================================================ */ :root{ /* ---- brand palette (brand-guide.md) ---- */ --c-forest-deep:#1B5E20; --c-forest:#2E7D32; --c-leaf:#43A047; --c-pale:#E8F5E9; --c-saffron:#FF9933; --c-amber:#E67E22; --c-ink:#212121; --c-muted:#5B5B5B; --c-border:#E0E0E0; --c-surface:#FFFFFF; --c-link:#0B4DA2; /* ---- semantic (light theme defaults) ---- */ --bg:#F4F7F3; --bg-alt:#FFFFFF; --surface:#FFFFFF; --surface-2:#F1F6EF; --header-bg:#FFFFFF; --topbar-bg:#123f16; --topbar-fg:#EAF3E9; --brandbar-bg:linear-gradient(90deg,#1B5E20 0%,#2E7D32 100%); --nav-bg:#1B5E20; --nav-fg:#FFFFFF; --nav-hover:#2E7D32; --text:#212121; --text-soft:#4a4a4a; --text-muted:#5B5B5B; --heading:#123f16; --primary:#1B5E20; --primary-fg:#FFFFFF; --accent:#EA7A0C; /* saffron used at contrast-safe shade for text-adjacent */ --accent-strong:#C85A00; --link:#0B4DA2; --border:#E0E0E0; --border-strong:#c8d3c6; --card:#FFFFFF; --card-tint:#EEF6EC; --footer-bg:#123f16; --footer-fg:#dfeede; --shadow-sm:0 1px 2px rgba(16,40,20,.06),0 1px 3px rgba(16,40,20,.08); --shadow:0 4px 14px rgba(16,40,20,.10); --shadow-lg:0 12px 34px rgba(16,40,20,.16); --focus:#0B4DA2; --danger:#b3261e; --ok:#1e7d34; --warn:#b06a00; /* ---- geometry / type ---- */ --font-scale:1; --radius:12px; --radius-sm:8px; --radius-lg:20px; --maxw:1240px; --font-latin:'Noto Sans',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; --font-display:'Poppins','Noto Sans',system-ui,sans-serif; --font-guj:'Noto Sans Gujarati','Noto Sans',sans-serif; --font-dev:'Noto Sans Devanagari','Noto Sans',sans-serif; --font:var(--font-latin); --font-head:var(--font-display); } /* language-driven font stacks (whole-site) */ html[lang="gu"]{--font:var(--font-guj);--font-head:var(--font-guj);} html[lang="hi"]{--font:var(--font-dev);--font-head:var(--font-dev);} /* ---- DARK theme (readability) ---- */ html[data-theme="dark"]{ --bg:#0F1E12;--bg-alt:#12251A;--surface:#14271A;--surface-2:#183020; --header-bg:#0d1c11;--topbar-bg:#0a1810;--topbar-fg:#cfe6cf; --brandbar-bg:linear-gradient(90deg,#0d2411 0%,#123f16 100%); --nav-bg:#0a1810;--nav-fg:#e8f5e9;--nav-hover:#1d3a25; --text:#E8F5E9;--text-soft:#cfe3cf;--text-muted:#a9c3ab;--heading:#DDF3DC; --primary:#2E7D32;--primary-fg:#FFFFFF;--accent:#FFB74D;--accent-strong:#FFB74D; --link:#8fc0ff;--border:#26402c;--border-strong:#34543a; --card:#15291B;--card-tint:#183021;--footer-bg:#0a1810;--footer-fg:#cfe3cf; --shadow-sm:0 1px 2px rgba(0,0,0,.4);--shadow:0 4px 16px rgba(0,0,0,.5);--shadow-lg:0 14px 40px rgba(0,0,0,.6); --focus:#FFD54F; } /* ---- HIGH-CONTRAST theme (GIGW / accessibility: black bg, yellow fg) ---- */ html[data-theme="contrast"]{ --bg:#000000;--bg-alt:#000000;--surface:#000000;--surface-2:#0a0a0a; --header-bg:#000000;--topbar-bg:#000000;--topbar-fg:#FFFF00; --brandbar-bg:#000000; --nav-bg:#000000;--nav-fg:#FFFF00;--nav-hover:#333300; --text:#FFFF00;--text-soft:#FFFF00;--text-muted:#FFFF66;--heading:#FFFF00; --primary:#FFFF00;--primary-fg:#000000;--accent:#FFFF00;--accent-strong:#FFFF00; --link:#66FFFF;--border:#FFFF00;--border-strong:#FFFF00; --card:#000000;--card-tint:#111100;--footer-bg:#000000;--footer-fg:#FFFF00; --shadow-sm:none;--shadow:none;--shadow-lg:none; --focus:#FFFFFF; } html[data-theme="contrast"] img{filter:none;} html[data-theme="contrast"] .surface,html[data-theme="contrast"] .card, html[data-theme="contrast"] .btn{border:2px solid #FFFF00 !important;}