/*
 * The one place the site's colour, type and spacing are decided.
 *
 * Before this, the React home page and each static page under public/ carried
 * their own inline <style> with their own hex values, so "the theme" existed
 * four times and had already drifted: the home page had no dark mode at all
 * while the legal pages did, and the same blue was written three different ways.
 * Every surface now reads from here, which is what makes them one site rather
 * than four pages that happen to share a logo.
 *
 * Loaded by the static pages with a plain <link>; the React bundle imports it
 * at the top of styles.css.
 */

/* Thai needs a typeface that actually has Thai in it. DM Sans and Manrope do
   not, so a Thai page set in them falls back mid-sentence to whatever the OS
   offers — which is why the Thai pages looked like a different site. IBM Plex
   Sans Thai is drawn against a Latin companion, so the two sit together at the
   same weight instead of one looking heavier than the other. */
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@600;700;800&family=IBM+Plex+Sans+Thai:wght@400;500;600;700&display=swap");

:root {
  /* Brand. The blue is the app icon's blue and the violet is the one the
     browser's own UI uses for selected state, so the site and the product are
     not two different products. */
  --brand: #2164ee;
  --brand-strong: #1a52c8;
  --brand-wash: #eaf1ff;
  --violet: #7853df;
  --violet-wash: #f3eaff;
  --green: #1da562;
  --green-wash: #e7f8ef;

  /* Neutrals as a ramp rather than as ad-hoc hexes, so a border and a muted
     label cannot drift apart between pages. */
  --ink: #101b3d;
  --ink-2: #3a4664;
  --ink-3: #626f8d;
  --ink-4: #8593ad;
  --surface: #ffffff;
  --surface-2: #f7f9fd;
  --surface-3: #eef3fb;
  --line: #e2e8f4;
  --line-strong: #cfd9ec;

  --radius: 15px;
  --radius-lg: 22px;
  --radius-sm: 11px;

  /* Shadows carry the brand hue rather than black, so depth reads as part of
     the palette instead of as grime over it. */
  --shadow-1: 0 8px 20px rgba(17, 38, 91, 0.07);
  --shadow-2: 0 18px 38px rgba(17, 38, 91, 0.11);
  --shadow-brand: 0 16px 32px rgba(33, 100, 238, 0.22);

  --font-sans: "DM Sans", "IBM Plex Sans Thai", "Segoe UI", system-ui, sans-serif;
  --font-display: "Manrope", "IBM Plex Sans Thai", "Segoe UI", system-ui, sans-serif;
  /* Thai has no capitals and taller ascenders, so a line height tuned for Latin
     crowds the vowel marks above and the tone marks below. */
  --font-thai: "IBM Plex Sans Thai", "Noto Sans Thai", "Segoe UI", system-ui, sans-serif;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --brand: #6f9bff;
    --brand-strong: #8db0ff;
    --brand-wash: #17233f;
    --violet: #a889f0;
    --violet-wash: #221c3a;
    --green: #4bd394;
    --green-wash: #12291f;

    --ink: #eef1f8;
    --ink-2: #c3cada;
    --ink-3: #98a2b8;
    --ink-4: #7885a0;
    --surface: #0d1017;
    --surface-2: #131722;
    --surface-3: #1a1f2e;
    --line: #232a3a;
    --line-strong: #323b50;

    --shadow-1: 0 8px 20px rgba(0, 0, 0, 0.4);
    --shadow-2: 0 18px 38px rgba(0, 0, 0, 0.5);
    --shadow-brand: 0 16px 32px rgba(33, 78, 170, 0.45);

    color-scheme: dark;
  }
}

/* Thai pages opt in with lang="th"; the selector means a page does not have to
   remember to set the family on every element. */
html[lang="th"] {
  --font-sans: var(--font-thai);
  --font-display: var(--font-thai);
}
html[lang="th"] body {
  line-height: 1.8;
}

/* Motion is decoration here, not information: nothing on this site conveys
   meaning only through movement, so switching it off costs the visitor nothing. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}