/* Shared across every page — CSS variables, reset, the 5-colour spectrum
   bar, and the header brand logo. Page-specific styles live in their own
   file (index.css / login.css / dashboard.css). */

:root{
  --toor:#F2B705; --chana:#D99A4E; --moong:#7BA05B; --masoor:#E06D3A; --urad:#3A3532;
  --ragi:#8B4225;
  --oil:#C99700;
  --ink:#231F1B; --paper:#FBF7EE; --green:#274430; --green-deep:#1B3123; --line:#D8CFBC;
  --disp:'Archivo Black',sans-serif; --body:'Archivo',sans-serif; --util:'Archivo Narrow',sans-serif;
  --max:1180px;
}

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

a{color:inherit}
img{max-width:100%}

.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}

.spectrum{display:flex;height:10px;width:100%}
.spectrum span{flex:1}
.spectrum .s1{background:var(--toor)}
.spectrum .s2{background:var(--chana)}
.spectrum .s3{background:var(--moong)}
.spectrum .s4{background:var(--masoor)}
.spectrum .s5{background:var(--urad)}

.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand-logo{height:64px;width:auto;display:block}

input:focus,select:focus,textarea:focus,button:focus-visible,a:focus-visible{
  outline:3px solid var(--toor);outline-offset:2px;
}