/* Shangkhachil design tokens (sk-01).
   One place. No component may write a hex value.

   The two-hue system is the identity: kite-chestnut is what the READER does,
   river-teal is where the AI is present. Keeping them apart means a person can
   tell, at a glance, which parts of a page are theirs and which are the
   machine's -- which matters more here than on most sites, because the whole
   product rests on knowing whose words you are reading. */

:root {
  /* Ground and paper -- river mist over a Bengal morning */
  --mist: #eff3ee;
  --paper: #fbfcfa;
  --line: #dce3dc;

  /* Ink */
  --ink: #1e2b29;
  --ink-soft: #4c5a56;
  --faint: #87938d;

  /* Kite chestnut: the reader's own actions */
  --kite: #9c4a26;
  --kite-deep: #7e3b1e;
  --kite-wash: #f5e9e2;

  /* River teal: the AI's presence, and quiet emphasis */
  --river: #2e5e55;
  --river-deep: #244c45;
  --river-wash: #e4eeea;

  /* Type. Tiro Bangla carries Bengali including display sizes -- a Bengali
     literary site set in a Latin display face with Bengali "for the body" gets
     the hierarchy backwards. Alegreya Sans is the Latin UI companion. */
  --font-bn: "Tiro Bangla", "Noto Serif Bengali", Georgia, serif;
  --font-latin: "Alegreya Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --fs-xs: 13px;
  --fs-sm: 14.5px;
  --fs-base: 16.5px;
  --fs-lg: 18px;
  --fs-xl: 22px;
  --fs-2xl: 28px;
  --fs-3xl: clamp(30px, 5vw, 46px);

  /* Reading measure. Bengali needs more line-height than Latin: the script has
     both ascenders and descenders around a heavy matra line, and 1.5 crowds it. */
  --lh-reading: 1.95;
  --lh-ui: 1.6;
  --measure: 34em;

  --radius: 12px;
  --radius-sm: 8px;
  --radius-pill: 999px;

  --gap-xs: 6px;
  --gap-sm: 10px;
  --gap: 16px;
  --gap-lg: 26px;
  --gap-xl: 44px;

  --shadow: 0 2px 10px rgba(30, 43, 41, 0.06);
  --shadow-lg: 0 4px 18px rgba(30, 43, 41, 0.12);

  /* Preprod banner (sk-04). Deliberately OUTSIDE the two-hue system: kite and
     river both mean something here -- what the reader does, and where the AI
     is -- so borrowing either would make the banner read as part of the
     product. This is scaffolding and should look like scaffolding. It is a
     token anyway, because the rule is that no component writes a hex value,
     and "my case is special" is how a token system stops being one. */
  --warn: #7a2e2e;
  --warn-ink: #fdf6f4;
}

/* Night reading. Not a whole-site dark theme -- a reading setting, because the
   thing people do here for an hour at a time is read prose. */
:root[data-night="on"] {
  --mist: #14201e;
  --paper: #1b2926;
  --line: #2a3b37;
  --ink: #e6ece7;
  --ink-soft: #adbab3;
  --faint: #87938d;
  --kite: #d08f6e;
  --kite-deep: #e0a888;
  --kite-wash: #2e2119;
  --river: #8dc0b4;
  --river-deep: #a5d0c5;
  --river-wash: #1d2e2a;
  --shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 4px 18px rgba(0, 0, 0, 0.45);
}