/* LiveSiam design tokens — the only colours, type and spacing values the site uses.
   Brand guidelines: /brand */

/* ---------- type (self-hosted, Thai + Latin subsets) ---------- */
@font-face { font-family: 'Kanit'; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/kanit-thai-500-normal.woff2) format('woff2'); unicode-range: U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC; }
@font-face { font-family: 'Kanit'; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/kanit-latin-500-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Kanit'; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/kanit-thai-600-normal.woff2) format('woff2'); unicode-range: U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC; }
@font-face { font-family: 'Kanit'; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/kanit-latin-600-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Kanit'; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/kanit-thai-700-normal.woff2) format('woff2'); unicode-range: U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC; }
@font-face { font-family: 'Kanit'; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/kanit-latin-700-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'IBM Plex Sans Thai'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/ibm-plex-sans-thai-thai-400-normal.woff2) format('woff2'); unicode-range: U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC; }
@font-face { font-family: 'IBM Plex Sans Thai'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/ibm-plex-sans-thai-latin-400-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'IBM Plex Sans Thai'; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/ibm-plex-sans-thai-thai-500-normal.woff2) format('woff2'); unicode-range: U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC; }
@font-face { font-family: 'IBM Plex Sans Thai'; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/ibm-plex-sans-thai-latin-500-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'IBM Plex Sans Thai'; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/ibm-plex-sans-thai-thai-600-normal.woff2) format('woff2'); unicode-range: U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC; }
@font-face { font-family: 'IBM Plex Sans Thai'; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/ibm-plex-sans-thai-latin-600-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

:root {
  /* ---------- palette ---------- */
  --midnight: #0B0820;       /* page background */
  --indigo: #140C33;         /* section / card surface */
  --night: #1D1446;          /* raised surface, inputs */
  --violet: #6B2BE0;         /* brand gradient end */
  --violet-deep: #2A1472;    /* brand gradient start */
  --gold: #F5C451;           /* primary accent, CTA */
  --gold-deep: #C98A12;      /* gold on light, pressed CTA */
  --lotus: #FF6FA8;          /* secondary accent — rare */
  --ivory: #FFF7E8;          /* text on dark */
  --mist: #A79FC4;           /* muted text */
  --success: #3DD68C;
  --warn: #F5A524;
  --danger: #FF5C6C;

  /* alpha steps of the palette (lines, washes) */
  --line: rgba(255, 247, 232, .09);
  --line-2: rgba(255, 247, 232, .16);
  --wash: rgba(255, 247, 232, .04);
  --wash-2: rgba(255, 247, 232, .07);
  --gold-wash: rgba(245, 196, 81, .10);
  --violet-wash: rgba(107, 43, 224, .16);
  --text: var(--ivory);
  --text-2: rgba(255, 247, 232, .78);
  --muted: var(--mist);

  --brand-gradient: linear-gradient(135deg, var(--violet-deep) 0%, var(--violet) 100%);

  /* ---------- type ---------- */
  --font-head: 'Kanit', 'IBM Plex Sans Thai', system-ui, sans-serif;
  --font-body: 'IBM Plex Sans Thai', 'Kanit', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --fs-display: clamp(2.125rem, 1.5rem + 3.6vw, 4rem);   /* 34 → 64 */
  --fs-h1: clamp(2.125rem, 1.6rem + 2vw, 3rem);         /* 34 → 48 */
  --fs-h2: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);      /* 28 → 40 */
  --fs-h3: 1.375rem;                                    /* 22 */
  --fs-h4: 1.125rem;                                    /* 18 */
  --fs-lead: 1.1875rem;                                 /* 19 */
  --fs-body: 1rem;                                      /* 16 */
  --fs-sm: .875rem;                                     /* 14 */
  --fs-xs: .78125rem;                                   /* 12.5 */
  --lh-body: 1.65;
  --lh-head: 1.2;

  /* ---------- space (4px base) ---------- */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;
  --section: clamp(72px, 6vw + 40px, 128px);

  /* ---------- layout ---------- */
  --max: 1200px;
  --gutter: 24px;
  --cols: 12;

  /* ---------- shape & depth ---------- */
  --r-sm: 8px; --r: 12px; --r-lg: 16px; --r-xl: 24px; --r-pill: 999px;
  --shadow-1: 0 1px 0 rgba(255, 247, 232, .04) inset, 0 8px 24px rgba(3, 2, 12, .35);
  --shadow-2: 0 1px 0 rgba(255, 247, 232, .05) inset, 0 24px 64px rgba(3, 2, 12, .55);
  --focus: 0 0 0 3px rgba(245, 196, 81, .45);
  --ease: cubic-bezier(.2, .7, .2, 1);
}