/* TeePa design tokens: import this file once, then use the semantic tokens (--tp-bg, --tp-text, ...).
   Light is the default. Dark follows the system setting, or force it with <html data-theme="dark|light">.
   Fonts are not bundled; load them with the Google Fonts link in BRAND.md. */

:root {
  /* ---- primitives ---------------------------------------------------- */
  --tp-orange-300: #FF8A6B;   /* orange text on dark */
  --tp-orange-500: #FF5A36;   /* the brand orange */
  --tp-orange-700: #C9472A;   /* orange text on light (4.6:1 on paper) */
  --tp-orange-100: #FFE6DE;   /* soft tint behind orange things */
  --tp-ink-900: #1C1C1C;      /* second brand colour, text ink */
  --tp-ink-700: #4A4440;
  --tp-ink-500: #6B645F;      /* muted text (5.6:1 on paper) */
  --tp-sand-200: #E9DFD6;     /* borders, dividers */
  --tp-paper: #FFFAF5;        /* warm page background */
  --tp-white: #FFFFFF;
  --tp-night-900: #141210;    /* dark page background */
  --tp-night-800: #1F1C1A;    /* dark surfaces */
  --tp-night-600: #3A3532;    /* dark borders */
  --tp-night-300: #A89F98;    /* dark muted text (7.2:1 on night-900) */

  /* ---- semantic colours: light --------------------------------------- */
  --tp-bg: var(--tp-paper);
  --tp-surface: var(--tp-white);
  --tp-text: var(--tp-ink-900);
  --tp-text-muted: var(--tp-ink-500);
  --tp-border: var(--tp-sand-200);
  --tp-brand: var(--tp-orange-500);          /* fills, icons, big graphics */
  --tp-brand-text: var(--tp-orange-700);     /* orange used as text or links */
  --tp-brand-soft: var(--tp-orange-100);
  --tp-on-brand: var(--tp-ink-900);          /* text on orange: ink (5.5:1), never white (3.1:1) */
  --tp-focus: var(--tp-ink-900);
  --tp-success: #15803D;
  --tp-warning: #A15C07;
  --tp-danger: #C62828;

  /* ---- type ---------------------------------------------------------- */
  --tp-font-heading-en: "Prompt", "Mitr", system-ui, sans-serif;
  --tp-font-body-en: "Figtree", "Prompt", system-ui, sans-serif;
  --tp-font-heading-th: "Mitr", "Prompt", system-ui, sans-serif;
  --tp-font-body-th: "Prompt", system-ui, sans-serif;
  --tp-font-heading: var(--tp-font-heading-en);
  --tp-font-body: var(--tp-font-body-en);

  --tp-weight-body: 400;
  --tp-weight-strong: 600;
  --tp-weight-heading: 600;

  --tp-text-display: 2.5rem;   /* 40 */
  --tp-text-h1: 2rem;          /* 32 */
  --tp-text-h2: 1.5rem;        /* 24 */
  --tp-text-h3: 1.25rem;       /* 20 */
  --tp-text-body: 1rem;        /* 16 */
  --tp-text-small: 0.875rem;   /* 14 */
  --tp-text-caption: 0.75rem;  /* 12 */

  --tp-leading-heading: 1.25;
  --tp-leading-body: 1.5;

  /* ---- space, shape, depth, motion ----------------------------------- */
  --tp-space-1: 4px;
  --tp-space-2: 8px;
  --tp-space-3: 12px;
  --tp-space-4: 16px;   /* page side gutter on phones */
  --tp-space-5: 24px;
  --tp-space-6: 32px;
  --tp-space-7: 48px;
  --tp-space-8: 64px;

  --tp-radius-sm: 8px;
  --tp-radius-md: 12px;
  --tp-radius-lg: 20px;
  --tp-radius-pill: 999px;
  --tp-radius-icon: 22.4%;   /* app icon corner, same as the tile in /app */

  --tp-shadow-sm: 0 1px 2px rgb(28 28 28 / 0.08);
  --tp-shadow-md: 0 6px 18px rgb(28 28 28 / 0.10);

  --tp-tap-min: 44px;        /* smallest tap target */
  --tp-ease: cubic-bezier(0.2, 0, 0, 1);
  --tp-duration-fast: 120ms;
  --tp-duration: 200ms;
}

/* Thai needs taller lines than Latin so tone marks and vowels do not collide. */
:lang(th) {
  --tp-font-heading: var(--tp-font-heading-th);
  --tp-font-body: var(--tp-font-body-th);
  --tp-weight-heading: 500;
  --tp-leading-heading: 1.4;
  --tp-leading-body: 1.7;
}

/* ---- dark ------------------------------------------------------------ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --tp-bg: var(--tp-night-900);
    --tp-surface: var(--tp-night-800);
    --tp-text: var(--tp-paper);
    --tp-text-muted: var(--tp-night-300);
    --tp-border: var(--tp-night-600);
    --tp-brand-text: var(--tp-orange-300);
    --tp-brand-soft: #3A211A;
    --tp-focus: var(--tp-paper);
    --tp-success: #4ADE80;
    --tp-warning: #F5B041;
    --tp-danger: #FF7A70;
    --tp-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
    --tp-shadow-md: 0 6px 18px rgb(0 0 0 / 0.45);
  }
}

:root[data-theme="dark"] {
  --tp-bg: var(--tp-night-900);
  --tp-surface: var(--tp-night-800);
  --tp-text: var(--tp-paper);
  --tp-text-muted: var(--tp-night-300);
  --tp-border: var(--tp-night-600);
  --tp-brand-text: var(--tp-orange-300);
  --tp-brand-soft: #3A211A;
  --tp-focus: var(--tp-paper);
  --tp-success: #4ADE80;
  --tp-warning: #F5B041;
  --tp-danger: #FF7A70;
  --tp-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
  --tp-shadow-md: 0 6px 18px rgb(0 0 0 / 0.45);
}

/* ---- minimal base, optional ------------------------------------------ */
body {
  background: var(--tp-bg);
  color: var(--tp-text);
  font-family: var(--tp-font-body);
  font-size: var(--tp-text-body);
  line-height: var(--tp-leading-body);
}
h1, h2, h3 {
  font-family: var(--tp-font-heading);
  font-weight: var(--tp-weight-heading);
  line-height: var(--tp-leading-heading);
}
:focus-visible { outline: 3px solid var(--tp-focus); outline-offset: 2px; }