/*
 * The design tokens, in the one place that owns them.
 *
 * They used to live in navigato.css, and demo.html — which is a standalone
 * page with its own stylesheet inside it — carried a hand-copied subset of
 * thirteen of them. Every value still matched, which is exactly the problem:
 * they agreed right up until the first palette change nobody remembered to
 * make twice.
 *
 * Every page links this before its own stylesheet. Nothing here styles
 * anything; it only names values, so linking it into a page that has its own
 * layout cannot disturb that layout — which is why demo.html can use it and
 * could not simply link navigato.css.
 */
:root {
  /* A Thai school morning: uniform navy, the pale blue just after sunrise,
     and marigold — the flower on every school shrine. Deliberately not the
     cream-and-terracotta this page used to wear. */
  --ink: #16223C;
  --ink-soft: #35405C;
  --muted: #5A6480;
  --muted-soft: #9AA3B7;
  --cream: #FBFAF8;        /* the page ground: warm white, not beige */
  --cream-2: #EDF1F8;      /* dawn: the quiet field a section sits on */
  --paper: #FFFFFF;
  --border: #E1E6F0;
  --border-soft: #EFF2F7;

  /* one accent, used where something matters */
  --primary: #DE8F0B;
  --primary-dark: #B0700A;
  /* The marigold is the brand and stays the brand — on a graphic, a rule or a
     large heading it is exactly right. As 13px text on white it measured
     2.31:1, well under AA, so small type gets a darker one of the same hue. */
  --primary-ink: #96620A;
  --primary-soft: #FCF1D9;

  /* tints, all in one family so a page of them reads as one page */
  --mint: #E4EFE8;
  --mint-dark: #2F7D52;
  --peach: #FBEEDC;
  --butter: #FCF4DE;
  --lavender: #E9EDF7;
  --rose: #FAEAEA;
  --sky: #E3EBF6;
  --sun: #EFB03A;

  /* LINE's own green appears only inside a LINE message, never as decoration.
     The solid chip is kept for the message bubbles themselves. The pale pair
     is for the small "LINE" label on a mockup header: white on #06C755 at
     10px measures 2.26:1, and nothing short of a green dark enough to stop
     looking like LINE fixes that. Dark green on a tint reads as LINE, passes
     at 6.2:1, and is quieter beside the rest of the palette. */
  --line-green: #06C755;
  --line-tint: #E3F7EA;
  --line-ink: #05682E;

  --shadow-sm: 0 1px 2px rgba(22, 34, 60, 0.06);
  --shadow-md: 0 6px 18px rgba(22, 34, 60, 0.07);
  --shadow-lg: 0 18px 40px rgba(22, 34, 60, 0.10);
  --shadow-xl: 0 30px 64px rgba(22, 34, 60, 0.14);

  /* Trirong is a Thai serif: school letters and certificates are set this way.
     Plex Sans Thai carries the reading. Two voices, nothing else. */
  --display: 'Trirong', 'IBM Plex Sans Thai', serif;
  --serif: 'Trirong', 'IBM Plex Sans Thai', serif;
  --body: 'IBM Plex Sans Thai', system-ui, sans-serif;
  --ui: 'IBM Plex Sans Thai', system-ui, sans-serif;
}