/* ==========================================================================
   শিক্ষাপথ — Design tokens v5
   Source: design-system.html. Components read --s-* only.
   Colour marks a MODE (story / concept / reflection), never a person.
   ========================================================================== */
:root{
  /* --- Paper -------------------------------------------------------------- */
  --paper-50:#FCFEFF; --paper-100:#F4F9FC; --paper-200:#EBE8E3; --paper-300:#D2CFCB;
  --paper-400:#B0AFAC; --paper-500:#909391; --paper-550:#888C8E; --paper-600:#6B7174;
  --paper-700:#4C5458; --paper-800:#343E43; --paper-900:#222C32; --paper-950:#111B21;

  /* --- Petrol · brand 800 / interactive 600 ------------------------------- */
  --petrol-50:#ECF4F9; --petrol-100:#DDEFFA; --petrol-200:#C0E1F4; --petrol-300:#94C7E5;
  --petrol-400:#68ABCF; --petrol-500:#4992B8; --petrol-600:#2F789B; --petrol-700:#1A5876;
  --petrol-800:#003B53; --petrol-900:#002E41; --petrol-950:#021D2A;

  /* --- Marigold · accent -------------------------------------------------- */
  --mg-50:#F8F2E9; --mg-100:#F9EAD8; --mg-200:#F3D7B7; --mg-300:#E4B88B;
  --mg-400:#D0985F; --mg-500:#BC7C3E; --mg-600:#A35F20; --mg-700:#7F4310;
  --mg-800:#602F0D; --mg-900:#4A230C; --mg-950:#311609;

  /* --- Fern / Amber / Vermilion · status only ----------------------------- */
  --fern-50:#EBF5ED; --fern-100:#DDF0E0; --fern-200:#C2E4C7; --fern-300:#9ACCA4;
  --fern-400:#70B17E; --fern-500:#549864; --fern-600:#317E47; --fern-700:#1D5E31;
  --fern-800:#134622; --fern-900:#10351A; --fern-950:#0A2210;
  --amb-50:#F7F2E8; --amb-100:#F7EAD6; --amb-200:#EED8B5; --amb-300:#DCBC88;
  --amb-600:#936800; --amb-800:#513700;
  --ver-50:#FCF0EE; --ver-100:#FFE6E4; --ver-300:#F2B0AA;
  --ver-600:#CB3C3C; --ver-700:#9C2527; --ver-800:#74191A;

  /* --- Type --------------------------------------------------------------- */
  --font:"Noto Sans Bengali","Noto Sans","Nirmala UI",system-ui,sans-serif;
  --bn:var(--font);
  --latin:"Noto Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --data:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  /* Type scale · 16px paragraph, steps up at 1500px. Bangla text never below --fs-caption. */
  --fs-display:clamp(26px, 1.6vw + 18px, 34px); --lh-display:1.35;
  --fs-h1:clamp(22px, .8vw + 17px, 26px);       --lh-h1:1.4;
  --fs-h2:20px;      --lh-h2:1.45;
  --fs-h3:18px;      --lh-h3:1.5;
  --fs-lede:17px;    --lh-lede:1.75;
  --fs-body:16px;    --lh-body:1.8;
  --fs-small:15px;   --lh-small:1.75;
  --fs-ui:14px;      --lh-ui:1.45;
  --fs-caption:13px; --lh-caption:1.6;
  --fs-micro:12px;   --lh-micro:1.4;
  --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700;

  /* --- Radius ------------------------------------------------------------- */
  --r-xs:4px; --r-sm:6px; --r-md:8px; --r-lg:12px; --r-xl:16px; --r-2xl:20px; --r-full:999px;
  --r-chip:var(--r-xs); --r-control:var(--r-md); --r-surface:var(--r-lg); --r-media:var(--r-xl); --r-sheet:var(--r-xl);

  /* --- Elevation · petrol-tinted, never grey ------------------------------ */
  --e1:0 1px 2px rgba(0,59,83,.04), 0 2px 6px -2px rgba(0,59,83,.06);
  --e2:0 1px 2px rgba(0,59,83,.04), 0 12px 32px -20px rgba(0,59,83,.24);
  --e3:0 2px 4px rgba(0,59,83,.05), 0 24px 56px -28px rgba(0,59,83,.34);

  /* --- Motion ------------------------------------------------------------- */
  --t-fast:160ms; --t-base:240ms; --t-slow:400ms;
  --ease:cubic-bezier(.22,.61,.36,1); --ease-spring:cubic-bezier(.34,1.3,.64,1);
  --m-fast:var(--t-fast); --m-base:var(--t-base); --m-slow:var(--t-slow);
  --m-ground:420ms; --m-write:500ms;

  /* --- Space · 4px base --------------------------------------------------- */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s45:20px; --s5:24px;
  --s6:32px; --s55:40px; --s7:48px; --s8:64px; --s85:80px; --s9:96px;
  --gutter:16px;

  /* --- Layout ------------------------------------------------------------- */
  --bar-h:52px; --header-h:64px; --sidebar-w:300px; --measure:52rem;

  /* --- Sidebar type · aliases of the global scale ------------------------- */
  --sidebar-title-fs:var(--fs-h3); --sidebar-subtitle-fs:var(--fs-caption); --sidebar-badge-fs:var(--fs-caption);
  --sidebar-navlabel-fs:var(--fs-caption); --sidebar-navtitle-fs:var(--fs-ui); --sidebar-navmeta-fs:var(--fs-caption);
  --sidebar-btn-fs:var(--fs-ui); --sidebar-btn-sm-fs:var(--fs-caption);

  /* --- Semantic product tokens (--s-*) ------------------------------------ */
  --s-canvas:#F4F9FC; --s-surface:#FCFEFF; --s-elev:#FFFFFF; --s-sunken:#E8F1F6;
  --s-overview:#ECF4F9;
  --s-line:rgba(0,59,83,.09); --s-line-mid:rgba(0,59,83,.16); --s-line-ui:#888C8E;
  --s-tx:#222C32; --s-body:#343E43; --s-soft:#4C5458; --s-mute:#6B7174; --s-off:#909391;
  --s-brand:#2F789B; --s-brand-h:#1A5876; --s-brand-a:#003B53;
  --s-brand-pale:#ECF4F9; --s-brand-tint:#DDEFFA; --s-brand-soft:rgba(47,120,155,.08);
  --s-onbrand:#FFFFFF; --s-ring:#111B21;
  --s-on-dark:#FFFFFF; --s-on-dark-soft:#F1F5F7; --s-on-dark-acc:#E4B88B;
  --s-acc:#D0985F; --s-acc-h:#BC7C3E; --s-acc-tx:#7F4310;
  --s-acc-pale:#F9EAD8; --s-acc-soft:rgba(188,124,62,.10); --s-onacc:#222C32;
  --s-ok:#317E47; --s-ok-tx:#1D5E31; --s-ok-pale:#DDF0E0; --s-ok-soft:rgba(49,126,71,.10);
  --s-warn:#DCBC88; --s-warn-tx:#513700; --s-warn-pale:#F7EAD6;
  --s-bad:#CB3C3C; --s-bad-tx:#9C2527; --s-bad-pale:#FFE6E4; --s-bad-soft:rgba(203,60,60,.08);
  --s-sh1:var(--e1); --s-sh2:var(--e2); --s-sh3:var(--e3); --s-grain:.04;
  --s-dawn:rgba(243,215,183,.42); --s-dusk:rgba(0,59,83,.22); --s-day:rgba(244,249,252,.12);

  /* --- Ground aliases used by [data-ground] / .step[data-g] --------------- */
  --bg:var(--s-canvas); --bg-2:var(--s-sunken); --bg-3:var(--s-elev);
  --fg:var(--s-tx); --fg-2:var(--s-body); --fg-3:var(--s-mute);
  --accent:var(--s-brand); --accent-fg:var(--s-onbrand);
  --speaker:var(--s-acc-tx); --line:var(--s-line);
  --chart-a:var(--petrol-600); --chart-b:var(--mg-600);

  /* --- Back-compat aliases (old ink/clay names → v5) ---------------------- */
  --ink-900:var(--petrol-950); --ink-800:var(--petrol-900); --ink-700:var(--petrol-800);
  --ink-600:var(--petrol-600); --ink-500:var(--petrol-500); --ink-400:var(--petrol-400);
  --ink-300:var(--petrol-300); --ink-200:var(--petrol-200); --ink-100:var(--petrol-100);
  --clay-900:var(--mg-900); --clay-800:var(--mg-800); --clay-700:var(--mg-700);
  --clay-600:var(--mg-600); --clay-500:var(--mg-500); --clay-400:var(--mg-400);
  --clay-300:var(--mg-300); --clay-200:var(--mg-200);
  --paper:var(--s-canvas); --paper-sunk:var(--s-sunken);
  --khata:var(--s-acc-pale); --khata-rule:var(--s-acc-soft);
  --scene:var(--s-canvas); --scene-2:var(--s-sunken); --scene-3:var(--s-elev);
  --t-900:var(--s-tx); --t-800:var(--s-body); --t-700:var(--s-soft);
  --t-500:var(--s-mute); --t-400:var(--s-off);
  --ok:var(--s-ok); --ok-bg:var(--s-ok-pale);
  --warn:var(--s-warn-tx); --warn-bg:var(--s-warn-pale);
  --err:var(--s-bad); --err-bg:var(--s-bad-pale);
  --rule:var(--s-line); --rule-strong:var(--s-line-mid);
  --chart-1:var(--petrol-600); --chart-2:var(--mg-600);
  --primary-700:var(--petrol-800); --primary-600:var(--petrol-600);
  --primary-500:var(--petrol-500); --primary-400:var(--petrol-400);
  --primary-200:var(--petrol-200); --primary-100:var(--petrol-100);
  --primary-50:var(--petrol-50);
  --warm-700:var(--mg-700); --warm-600:var(--mg-600); --warm-500:var(--mg-500);
  --neutral-900:var(--s-tx); --neutral-800:var(--s-body); --neutral-600:var(--s-mute);
  --neutral-100:var(--s-sunken);
  --border-light:var(--s-line);
  --bg-sidebar:var(--s-surface); --bg-body:var(--s-canvas);
  --text-primary:var(--s-tx); --text-tertiary:var(--s-mute);
  --success:var(--s-ok);
  --shadow-sm:var(--s-sh1); --shadow-lg:var(--s-sh2);
  --sheet-shadow:var(--s-sh3);
}

/* Grounds. Colour marks the mode, not the person. */
[data-ground="scene"], .step[data-g="scene"]{
  --bg:var(--s-canvas); --bg-2:var(--s-sunken); --bg-3:var(--s-elev);
  --fg:var(--s-tx); --fg-2:var(--s-body); --fg-3:var(--s-mute);
  --accent:var(--s-acc-h); --accent-fg:var(--s-onacc);
  --speaker:var(--s-acc-tx); --line:var(--s-line);
}
[data-ground="overview"]{
  --bg:var(--s-canvas); --bg-2:var(--s-sunken); --bg-3:var(--s-elev);
  --fg:var(--s-tx); --fg-2:var(--s-body); --fg-3:var(--s-mute);
  --accent:var(--s-brand); --accent-fg:var(--s-onbrand);
  --speaker:var(--s-brand-h); --line:var(--s-line);
}
[data-ground="page"], .step[data-g="page"]{
  --bg:var(--s-canvas); --bg-2:var(--s-sunken); --bg-3:var(--s-elev);
  --fg:var(--s-tx); --fg-2:var(--s-body); --fg-3:var(--s-mute);
  --accent:var(--s-brand); --accent-fg:var(--s-onbrand);
  --speaker:var(--s-brand-h); --line:var(--s-line);
}
[data-ground="khata"], .step[data-g="khata"]{
  --bg:var(--s-canvas); --bg-2:var(--s-sunken); --bg-3:var(--s-elev);
  --fg:var(--s-tx); --fg-2:var(--s-body); --fg-3:var(--s-mute);
  --accent:var(--s-acc-h); --accent-fg:var(--s-onacc);
  --speaker:var(--s-acc-tx); --line:var(--s-line);
}

@media (min-width:768px){
  :root{ --gutter:24px; }
}
@media (min-width:1024px){
  :root{ --sidebar-w:335px; }
}
@media (min-width:1280px){
  :root{ --gutter:32px; }
}
@media (min-width:1500px){
  :root{
    --header-h:80px; --sidebar-w:360px;
    --fs-display:36px; --fs-h1:28px; --fs-h2:22px; --fs-h3:19px;
    --fs-lede:18px; --fs-body:17px; --fs-small:16px;
    --fs-ui:15px; --fs-caption:14px; --fs-micro:12px;
  }
}

/* large screens: content column 200px wider */
@media (min-width:1400px){ :root{ --measure:calc(52rem + 200px); } }