/* ============================================================
   BONFIRE CLOUD — Foundation Tokens
   Colors, Typography, Gradients
   ============================================================ */

/* Noto Sans Thai + JetBrains Mono — self-hosted to bypass tracker
   blockers (Brave Shields, uBlock) that drop fonts.googleapis.com
   requests and fall the page back to system fonts. The companion
   stylesheet was generated by saving the original Google Fonts CSS
   and rewriting each https://fonts.gstatic.com/...woff2 URL to a
   local path under styles/fonts/google/. Unicode-range slicing is
   preserved so the browser still only downloads the subsets it
   needs (~30 KB per visitor for Thai+Latin). */
@import url('fonts/google-fonts.css');

/* Brand-supplied Exo 2 — static weight files, roman + italic */
@font-face { font-family: 'Exo 2'; src: url('fonts/Exo2-Thin.ttf') format('truetype');            font-weight: 100; font-style: normal; font-display: swap; }
@font-face { font-family: 'Exo 2'; src: url('fonts/Exo2-ThinItalic.ttf') format('truetype');      font-weight: 100; font-style: italic; font-display: swap; }
@font-face { font-family: 'Exo 2'; src: url('fonts/Exo2-ExtraLight.ttf') format('truetype');      font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: 'Exo 2'; src: url('fonts/Exo2-ExtraLightItalic.ttf') format('truetype');font-weight: 200; font-style: italic; font-display: swap; }
@font-face { font-family: 'Exo 2'; src: url('fonts/Exo2-Light.ttf') format('truetype');           font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Exo 2'; src: url('fonts/Exo2-LightItalic.ttf') format('truetype');     font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: 'Exo 2'; src: url('fonts/Exo2-Regular.ttf') format('truetype');         font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Exo 2'; src: url('fonts/Exo2-Italic.ttf') format('truetype');          font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Exo 2'; src: url('fonts/Exo2-Medium.ttf') format('truetype');          font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Exo 2'; src: url('fonts/Exo2-MediumItalic.ttf') format('truetype');    font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: 'Exo 2'; src: url('fonts/Exo2-SemiBold.ttf') format('truetype');        font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Exo 2'; src: url('fonts/Exo2-SemiBoldItalic.ttf') format('truetype');  font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: 'Exo 2'; src: url('fonts/Exo2-Bold.ttf') format('truetype');            font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Exo 2'; src: url('fonts/Exo2-BoldItalic.ttf') format('truetype');      font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: 'Exo 2'; src: url('fonts/Exo2-ExtraBold.ttf') format('truetype');       font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Exo 2'; src: url('fonts/Exo2-ExtraBoldItalic.ttf') format('truetype'); font-weight: 800; font-style: italic; font-display: swap; }
@font-face { font-family: 'Exo 2'; src: url('fonts/Exo2-Black.ttf') format('truetype');           font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Exo 2'; src: url('fonts/Exo2-BlackItalic.ttf') format('truetype');     font-weight: 900; font-style: italic; font-display: swap; }

:root {
  /* -------- Primary / Cloud Gradient stops -------- */
  --bonfire-cyan:    #3CA0C8;   /* Primary CTA, links, focus */
  --royal-blue:      #2878B4;   /* Secondary button, anchors */
  --sky:             #78C8F0;   /* Highlights, hover */
  --midnight-navy:   #14143C;   /* Dark hero, footer */

  /* -------- Accent / Spark (from Bonfire Gathering flame) -------- */
  --ember:           #D22D00;   /* Ignite CTA, errors */
  --flame:           #F05A00;   /* Secondary accent, badges */
  --amber:           #F08700;   /* Warnings, warm highlights */

  /* -------- Light mode (default) -------- */
  --bg:              #EEF2F7;   /* Paper — softened from #F7FAFD for less glare */
  --surface:         #F7F9FC;   /* Cards — warm off-white instead of pure white */
  --surface-alt:     #DDE6F0;
  --border:          #D9E0EB;
  --border-strong:   #AFBCCD;
  --text-primary:    #0A1128;
  --text-secondary:  #3C508C;
  --text-muted:      #6B7A95;
  --link:            #2878B4;
  --brand:           #3CA0C8;
  --brand-hover:     #2878B4;
  --accent:          #D22D00;
  --accent-hover:    #F05A00;

  /* -------- Gradients -------- */
  --cloud-gradient: linear-gradient(135deg,
    #78C8F0 0%,
    #3CA0C8 35%,
    #2878B4 70%,
    #14143C 100%);

  --flame-gradient: linear-gradient(180deg,
    #F08700 0%,
    #F05A00 50%,
    #D22D00 100%);

  /* -------- Elevation -------- */
  --shadow-sm:  0 1px 2px rgba(20, 20, 60, 0.06);
  --shadow-md:  0 4px 12px rgba(20, 20, 60, 0.08), 0 1px 3px rgba(20, 20, 60, 0.04);
  --shadow-lg:  0 12px 32px rgba(20, 20, 60, 0.12), 0 2px 6px rgba(20, 20, 60, 0.06);
  --shadow-focus: 0 0 0 3px rgba(60, 160, 200, 0.35);

  /* -------- Radii -------- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  /* -------- Spacing (4px base) -------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* -------- Type stacks -------- */
  --font-latin: "Exo 2", "Noto Sans Thai", system-ui, -apple-system, sans-serif;
  --font-thai:  "Noto Sans Thai", "Exo 2", system-ui, -apple-system, sans-serif;
  /* Noto Sans Thai sits in the mono fallback chain so Thai glyphs
     in .mono elements (e.g. home-hero stat values like "ซัพพอร์ต"
     and "ทดลองฟรี") render in Noto rather than the system fallback.
     Per-character font fallback: Latin/digits still use JetBrains
     Mono first; Thai chars (which JBM doesn't have) drop to Noto. */
  --font-mono:  "JetBrains Mono", "Fira Code", "Noto Sans Thai", ui-monospace, Menlo, monospace;

  /* -------- Motion -------- */
  --ease: cubic-bezier(.2, .6, .2, 1);
  --dur-fast: 120ms;
  --dur: 200ms;
}

[data-theme="dark"] {
  --bg:              #0A0E24;   /* Deep Space (NEVER pure black) */
  --surface:         #141838;
  --surface-alt:     #1E2448;
  --border:          #2A3158;
  --border-strong:   #3E4778;
  --text-primary:    #E8EDF7;
  --text-secondary:  #9AA4BE;
  --text-muted:      #7A84A0;
  --link:            #78C8F0;
  --brand:           #3CA0C8;
  --brand-hover:     #78C8F0;   /* lighter on dark */
  --accent:          #D22D00;
  --accent-hover:    #F05A00;

  --shadow-sm:  0 1px 2px rgba(0,0,0,0.4);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.4);
  --shadow-lg:  0 12px 32px rgba(0,0,0,0.5);
  --top-highlight: inset 0 1px 0 0 rgba(255,255,255,0.06);
}

/* ============================================================
   Semantic typography — apply directly to elements
   ============================================================ */

html, body {
  background: var(--bg);
  color: var(--text-primary);
  font-family: var(--font-latin);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color var(--dur) var(--ease),
              color var(--dur) var(--ease);
}

/* Latin-first (default). Thai-first contexts should set .lang-th */
.lang-th, [lang="th"] {
  font-family: var(--font-thai);
  line-height: 1.7;
}

.display {
  font-size: 64px;
  line-height: 76px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

h1, .h1 {
  font-size: 48px;
  line-height: 60px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 0.5em;
}

h2, .h2 {
  font-size: 32px;
  line-height: 44px;
  font-weight: 700;
  margin: 0 0 0.5em;
}

h3, .h3 {
  font-size: 24px;
  line-height: 34px;
  font-weight: 600;
  margin: 0 0 0.5em;
}

h4, .h4 {
  font-size: 20px;
  line-height: 30px;
  font-weight: 600;
  margin: 0 0 0.5em;
}

.body-lg {
  font-size: 18px;
  line-height: 30px;
  font-weight: 400;
}

p, .body {
  font-size: 16px;
  line-height: 28px;
  font-weight: 400;
}

.body-sm {
  font-size: 14px;
  line-height: 22px;
  font-weight: 500;   /* bumped to 500 for legibility under 14 */
}

.caption {
  font-size: 12px;
  line-height: 18px;
  font-weight: 500;
}

.eyebrow {
  font-size: 13px;
  line-height: 18px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
}

code, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

a {
  color: var(--link);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
a:hover { border-bottom-color: currentColor; }

/* Long-form body text — left-align only (no justify) */
p, article { text-align: left; text-wrap: pretty; }

/* Responsive display */
@media (max-width: 640px) {
  .display { font-size: 40px; line-height: 48px; }
  h1, .h1 { font-size: 36px; line-height: 44px; }
  h2, .h2 { font-size: 28px; line-height: 36px; }
}

/* ============================================================
   Utility classes — Buttons
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 20px;
  box-sizing: border-box;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease),
              color var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

.btn-primary   { background: var(--brand); color: #FFFFFF; }
.btn-primary:hover { background: var(--brand-hover); }

.btn-secondary { background: var(--royal-blue); color: #FFFFFF; }
.btn-secondary:hover { background: #1E5E92; }

.btn-ignite    { background: var(--ember); color: #FFFFFF; }
.btn-ignite:hover { background: var(--accent-hover); }

.btn-ghost     { background: transparent; color: var(--text-primary); border: 1.5px solid var(--border-strong, #CBD5E1); box-shadow: inset 0 0 0 0 transparent; }
.btn-ghost:hover { background: var(--surface-alt); border-color: var(--text-muted); }