/* ==========================================================================
   NCUSO Digital Ecosystem — Design tokens & base
   Direction: the Indian school exercise-book (ink blue, ruled lines, red margin)
   meets the registry & certificate (seals, QR verification).
   ========================================================================== */

@font-face{font-family:"Public Sans Variable";font-style:normal;font-display:swap;font-weight:100 900;
  src:url(../fonts/public-sans-latin.woff2) format("woff2-variations");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Public Sans Variable";font-style:normal;font-display:swap;font-weight:100 900;
  src:url(../fonts/public-sans-latin-ext.woff2) format("woff2-variations");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Literata Variable";font-style:normal;font-display:swap;font-weight:200 900;
  src:url(../fonts/literata-latin.woff2) format("woff2-variations");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Literata Variable";font-style:normal;font-display:swap;font-weight:200 900;
  src:url(../fonts/literata-latin-ext.woff2) format("woff2-variations");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --font-sans:"Public Sans Variable","Public Sans",system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans Bengali","Helvetica Neue",Arial,sans-serif;
  --font-serif:"Literata Variable","Literata",Georgia,"Times New Roman",serif;

  --bg:#F3F5FB; --surface:#FFFFFF; --surface-2:#F8FAFE; --surface-3:#EFF3FB;
  --line:#E1E6F2; --line-strong:#C7D0E4;
  --text:#131A33; --text-2:#434E6B; --text-3:#68748F;

  --brand:#1B3A9E; --brand-hover:#152F84; --brand-strong:#0E1E5B; --link:#1B3A9E;
  --brand-soft:#E8EDFC; --brand-line:#C6D3F5; --on-brand:#FFFFFF;
  --accent:#D23F36; --accent-soft:#FCEBE9;
  --ok:#0F7B5A; --ok-soft:#E1F4EC; --warn:#9A5F06; --warn-soft:#FCF0D9;
  --bad:#C2312B; --bad-soft:#FCE9E7; --info:#1C6CB0; --info-soft:#E2F0FB;
  --violet:#5A44C6; --violet-soft:#EDE9FA; --teal:#0C7F7B; --teal-soft:#DFF3F2;

  --c1:#2B4FC4; --c2:#0E9384; --c3:#E0A030; --c4:#D23F36; --c5:#7A5AF8; --c6:#8792A8;
  --grid:#E6EAF4;

  --side-bg:#0D1A4A; --side-bg-2:#0A1540; --side-text:#B4C0EA; --side-dim:#7D8BBF; --side-active:rgba(255,255,255,.09); --side-line:rgba(255,255,255,.09);

  --rule:rgba(27,58,158,.075);
  --focus:#3B62E8;
  --shadow-pop:0 12px 40px -8px rgba(13,26,74,.28),0 2px 8px rgba(13,26,74,.10);
  --shadow-card:0 1px 2px rgba(13,26,74,.04);
  --overlay:rgba(9,15,38,.52);

  --r-sm:6px; --r:10px; --r-lg:14px; --r-xl:20px;
  --fs-xs:.75rem; --fs-sm:.8125rem; --fs-base:.90625rem; --fs-md:1rem; --fs-lg:1.125rem; --fs-xl:1.375rem; --fs-2xl:1.75rem; --fs-3xl:2.25rem; --fs-4xl:3.4rem;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0A1024; --surface:#111A35; --surface-2:#16213F; --surface-3:#1B2749;
    --line:#22305A; --line-strong:#34447B;
    --text:#E9EDF9; --text-2:#B5BFDA; --text-3:#8895B8;
    --brand:#4F73EE; --brand-hover:#6483F2; --brand-strong:#BCCBFF; --link:#8FA9FF;
    --brand-soft:#1A2856; --brand-line:#2C3F84; --on-brand:#FFFFFF;
    --accent:#F0655C; --accent-soft:#3A1E27;
    --ok:#3CC79A; --ok-soft:#10352F; --warn:#F0B44E; --warn-soft:#3A2D12;
    --bad:#F47D76; --bad-soft:#3B1E24; --info:#68B0EE; --info-soft:#14304A;
    --violet:#A594F5; --violet-soft:#29235A; --teal:#4CCBC5; --teal-soft:#0F3536;
    --c1:#6C8DFF; --c2:#33C2B2; --c3:#F0B44E; --c4:#F0655C; --c5:#A594F5; --c6:#8895B8;
    --grid:#1F2B50; --side-bg:#080E26; --side-bg-2:#060B1D; --rule:rgba(140,165,255,.06);
    --shadow-pop:0 16px 48px -8px rgba(0,0,0,.6),0 2px 8px rgba(0,0,0,.4); --overlay:rgba(3,6,18,.66);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
    --bg:#0A1024; --surface:#111A35; --surface-2:#16213F; --surface-3:#1B2749;
    --line:#22305A; --line-strong:#34447B;
    --text:#E9EDF9; --text-2:#B5BFDA; --text-3:#8895B8;
    --brand:#4F73EE; --brand-hover:#6483F2; --brand-strong:#BCCBFF; --link:#8FA9FF;
    --brand-soft:#1A2856; --brand-line:#2C3F84; --on-brand:#FFFFFF;
    --accent:#F0655C; --accent-soft:#3A1E27;
    --ok:#3CC79A; --ok-soft:#10352F; --warn:#F0B44E; --warn-soft:#3A2D12;
    --bad:#F47D76; --bad-soft:#3B1E24; --info:#68B0EE; --info-soft:#14304A;
    --violet:#A594F5; --violet-soft:#29235A; --teal:#4CCBC5; --teal-soft:#0F3536;
    --c1:#6C8DFF; --c2:#33C2B2; --c3:#F0B44E; --c4:#F0655C; --c5:#A594F5; --c6:#8895B8;
    --grid:#1F2B50; --side-bg:#080E26; --side-bg-2:#060B1D; --rule:rgba(140,165,255,.06);
    --shadow-pop:0 16px 48px -8px rgba(0,0,0,.6),0 2px 8px rgba(0,0,0,.4); --overlay:rgba(3,6,18,.66);
    color-scheme:dark;
}

/* ---- reset ---- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-sans);font-size:var(--fs-base);line-height:1.55;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;min-height:100vh}
h1,h2,h3,h4,h5,p,ul,ol,figure,blockquote,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
img,svg,canvas{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline}
table{border-collapse:collapse}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:4px}
::selection{background:var(--brand);color:#fff}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* ---- type ---- */
.serif,h1.serif,h2.serif,h3.serif{font-family:var(--font-serif)}
h1,h2,h3,h4{color:var(--brand-strong);font-weight:650;line-height:1.2;letter-spacing:-.01em}
.t-display{font-family:var(--font-serif);font-weight:600;font-size:clamp(2.3rem,4.6vw,var(--fs-4xl));line-height:1.08;letter-spacing:-.022em}
.t-h1{font-family:var(--font-serif);font-weight:600;font-size:var(--fs-3xl);letter-spacing:-.018em}
.t-h2{font-family:var(--font-serif);font-weight:600;font-size:var(--fs-2xl);letter-spacing:-.014em}
.t-h3{font-size:var(--fs-lg);font-weight:650}
.t-lead{font-size:1.15rem;line-height:1.6;color:var(--text-2);max-width:62ch}
.muted{color:var(--text-3)} .text-2{color:var(--text-2)} .small{font-size:var(--fs-sm)} .xs{font-size:var(--fs-xs)}
.num{font-variant-numeric:tabular-nums}
.strong{font-weight:650} .nowrap{white-space:nowrap} .center{text-align:center} .right{text-align:right}
.trunc{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.92em;letter-spacing:-.01em}

/* ---- utilities ---- */
.flex{display:flex} .inline-flex{display:inline-flex} .col{flex-direction:column} .wrap{flex-wrap:wrap}
.items-center{align-items:center} .items-start{align-items:flex-start} .items-end{align-items:flex-end}
.between{justify-content:space-between} .end{justify-content:flex-end} .jc-center{justify-content:center} .grow{flex:1 1 0;min-width:0} .shrink-0{flex-shrink:0}
.gap-1{gap:4px} .gap-2{gap:8px} .gap-3{gap:12px} .gap-4{gap:16px} .gap-5{gap:24px} .gap-6{gap:32px}
.mt-1{margin-top:4px} .mt-2{margin-top:8px} .mt-3{margin-top:12px} .mt-4{margin-top:16px} .mt-5{margin-top:24px} .mt-6{margin-top:32px}
.mb-1{margin-bottom:4px} .mb-2{margin-bottom:8px} .mb-3{margin-bottom:12px} .mb-4{margin-bottom:16px} .mb-5{margin-bottom:24px}
.ml-auto{margin-left:auto} .w-full{width:100%} .relative{position:relative}
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))} .g3{grid-template-columns:repeat(3,minmax(0,1fr))} .g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g-12-8{grid-template-columns:minmax(0,2fr) minmax(0,1fr)} .g-8-4{grid-template-columns:minmax(0,1.7fr) minmax(0,1fr)} .g-7-5{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}
@media (max-width:1100px){.g4{grid-template-columns:repeat(2,minmax(0,1fr))} .g3{grid-template-columns:repeat(2,minmax(0,1fr))} .g-12-8,.g-8-4,.g-7-5{grid-template-columns:minmax(0,1fr)}}
@media (max-width:680px){.g2,.g3,.g4{grid-template-columns:minmax(0,1fr)}}
.tone-ok{color:var(--ok)} .tone-warn{color:var(--warn)} .tone-bad{color:var(--bad)} .tone-info{color:var(--info)} .tone-brand{color:var(--link)}
.divider{height:1px;background:var(--line);margin:16px 0}
.icon{display:inline-block;flex-shrink:0;vertical-align:middle;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

/* safe areas (notched phones / hosted viewers) */
:root{box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
html{scroll-padding-top:env(safe-area-inset-top,0px)}