/* ============================================================
   tokens.css — the single source of truth for the look & feel.
   Re-skin the ENTIRE site by editing the values in :root.
   Brand: HearThai blue + white, with minimal green accents.
   ============================================================ */

/* ---- Web fonts (local, offline — copied from the HearThai app) ---- */
@font-face { font-family:"Inter"; src:url("../fonts/Inter-Regular.ttf") format("truetype"); font-weight:400; font-display:swap; }
@font-face { font-family:"Inter"; src:url("../fonts/Inter-Medium.ttf") format("truetype"); font-weight:500; font-display:swap; }
@font-face { font-family:"Inter"; src:url("../fonts/Inter-SemiBold.ttf") format("truetype"); font-weight:600; font-display:swap; }
@font-face { font-family:"Inter"; src:url("../fonts/Inter-Bold.ttf") format("truetype"); font-weight:700; font-display:swap; }
@font-face { font-family:"Inter"; src:url("../fonts/Inter-ExtraBold.ttf") format("truetype"); font-weight:800; font-display:swap; }
@font-face { font-family:"Inter"; src:url("../fonts/Inter-Black.ttf") format("truetype"); font-weight:900; font-display:swap; }

/* Display face for headings (friendly but crafted) */
@font-face { font-family:"Poppins"; src:url("../fonts/Poppins-Regular.ttf") format("truetype"); font-weight:400; font-display:swap; }
@font-face { font-family:"Poppins"; src:url("../fonts/Poppins-Bold.ttf") format("truetype"); font-weight:700; font-display:swap; }

/* Bundled Thai face (Leelawadee UI — modern, loopless). "The script IS the product."
   Bundled so Thai NEVER silently falls back to Tahoma. Real bold face included so
   bold Thai isn't synthetically smeared (which collides tone marks with consonants). */
@font-face { font-family:"HTSThai"; src:url("../fonts/LeelawadeeUI.ttf") format("truetype"); font-weight:400; font-display:swap; }
@font-face { font-family:"HTSThai"; src:url("../fonts/LeelawadeeUI-Bold.ttf") format("truetype"); font-weight:700; font-display:swap; }

:root{
  /* ---- Brand palette ---- */
  --blue-50:#eef5ff;
  --blue-100:#d9e8ff;
  --blue-200:#b3d0ff;
  --blue-300:#7fb0fb;
  --blue-400:#4a8ef0;
  --blue-500:#1f70df;   /* primary */
  --blue-600:#155ec2;
  --blue-700:#114e98;
  --blue-800:#0e3f7a;
  --blue-900:#0b2f5c;

  /* Accents — desaturated to dustier, premium tones. Blue is THE brand; these
     are supporting hues, each with a defined semantic role. */
  --green-100:#dbeee2;
  --green-300:#8fccaa;
  --green-500:#2f9468;  /* success / "rising" — dustier teal-green */
  --green-600:#247a55;

  --amber-500:#cf9233;  /* warm accent / "falling" / highlight */
  --amber-600:#b07a22;
  --rose-500:#cc5567;   /* alert / "high" tone — muted clay-rose */
  --violet-500:#6f63c4; /* playful / Sounds wing — dusty indigo */

  /* ---- Neutrals ---- */
  --ink-900:#0d1b2a;    /* primary text */
  --ink-700:#33424f;
  --ink-500:#5b6b7a;    /* secondary text */
  --ink-400:#8493a1;
  --line:#e6ecf2;       /* borders */
  --line-strong:#d2dbe4;
  --surface:#ffffff;
  --surface-2:#f6f9fc;  /* page background */
  --surface-3:#eef3f8;  /* sunken */

  /* ---- Tone colors (used across Sounds + rules) ---- */
  --tone-mid:#5b6b7a;
  --tone-low:#2f6bbf;
  --tone-high:#cc5567;
  --tone-rising:#2f9468;
  --tone-falling:#cf9233;

  /* ---- Typography ---- */
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Poppins", "Inter", system-ui, sans-serif;
  --font-thai: "HTSThai", "Leelawadee UI", "Noto Sans Thai", "Sarabun", var(--font);

  /* type scale — bumped a notch for readability (esp. inside cards) */
  --fs-xs:13px; --fs-sm:14px; --fs-md:16px; --fs-lg:19px;
  --fs-xl:23px; --fs-2xl:30px; --fs-3xl:38px; --fs-4xl:52px;

  /* ---- Spacing scale ---- */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px;

  /* ---- Radii & shadow (tightened: less bouncy, more crafted) ---- */
  --r-sm:7px; --r-md:11px; --r-lg:15px; --r-xl:20px; --r-pill:999px;
  --shadow-sm:0 1px 2px rgba(13,27,42,.05), 0 1px 2px rgba(13,27,42,.04);
  --shadow-md:0 3px 10px rgba(13,27,42,.07);
  --shadow-lg:0 14px 34px rgba(13,27,42,.12);
  --ring:0 0 0 3px var(--blue-100);

  /* ---- Layout ---- */
  --sidebar-w:248px;
  --topbar-h:64px;
  --content-max:1400px;
}