/* ThaiLumaGuide — Design tokens v1.3 */
/* Typography matches choklotto.com: one system-font stack, no web fonts to load */
:root {
  color-scheme: light;
  --color-ink: #101B35;
  --color-body: #52627B;
  --color-muted: #5F6C82;
  --color-background: #F7F8FE;
  --color-surface: #FFFFFF;
  --color-surface-lavender: #F4F0FF;
  --color-surface-mint: #EFFAF6;
  --color-border: #E6E9F2;
  --color-purple: #7424CB;
  --color-purple-dark: #59169E;
  --color-gold: #F3B33F;
  --color-gold-dark: #C78118;
  --color-teal: #075A50;
  --color-teal-dark: #03463F;
  --color-orange: #F47730;
  --color-focus: #7445E5;
  --gradient-heading: linear-gradient(95deg,#862DD2 0%,#A12CCD 35%,#CC5F1A 86%);
  --gradient-cta: linear-gradient(180deg,#F8C65D 0%,#CB851F 100%);
  --gradient-banner: linear-gradient(110deg,#4A1496 0%,#7424CB 55%,#8A3BD6 100%);
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans Thai", "Noto Sans Lao", "Lao Sangam MN", "Phetsarath OT", "Helvetica Neue", Arial, sans-serif;
  --font-heading: var(--font-sans);
  --font-body: var(--font-sans);
  --text-xs: .75rem; --text-sm: .875rem; --text-md: 1rem;
  --text-lg: 1.125rem; --text-xl: 1.375rem;
  --title-hero: clamp(2.25rem,4.4vw,4rem);
  --title-section: clamp(1.75rem,2.8vw,2.75rem);
  --space-1: .25rem; --space-2: .5rem; --space-3: .75rem;
  --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem;
  --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem;
  --space-16: 4rem; --space-20: 5rem;
  --radius-sm: .5rem; --radius-md: .875rem;
  --radius-lg: 1.25rem; --radius-xl: 1.75rem;
  --shadow-card: 0 10px 28px rgba(21,24,56,.07);
  --shadow-hover: 0 16px 34px rgba(21,24,56,.12);
  --container-width: 1200px;
  --duration-fast: 160ms;
  --duration-normal: 240ms;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--color-background);color:var(--color-body);font-family:var(--font-body);font-size:var(--text-md);line-height:1.6}
h1,h2,h3,h4{margin:0;color:var(--color-ink);font-family:var(--font-heading);line-height:1.2}
h1{font-size:var(--title-hero)}h2{font-size:var(--title-section)}
a{color:var(--color-purple);text-decoration-thickness:1px;text-underline-offset:3px}
:focus-visible{outline:3px solid var(--color-focus);outline-offset:3px}
.container{width:min(var(--container-width),calc(100% - 48px));margin-inline:auto}
.section{padding-block:var(--space-16)}
.section-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:var(--space-10)}
.eyebrow{font-size:var(--text-xs);font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--color-muted)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.65rem;min-height:48px;padding:12px 24px;border:0;border-radius:var(--radius-sm);font:700 var(--text-sm)/1.2 var(--font-body);text-decoration:none;cursor:pointer;transition:transform var(--duration-fast),box-shadow var(--duration-fast)}
.btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-hover)}
.btn-primary{background:var(--color-purple);color:#fff}
.btn-primary:hover{background:var(--color-purple-dark)}
.btn-secondary{background:var(--color-teal);color:#fff}
.btn-secondary:hover{background:var(--color-teal-dark)}
.btn-ghost{background:var(--color-surface);color:var(--color-ink);border:1px solid var(--color-border)}
.card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-card)}
.card img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.card__content{padding:var(--space-4)}
.card__title{font-size:var(--text-lg);font-weight:700}
.card__body{font-size:var(--text-sm);color:var(--color-body)}
.card__link{font-size:var(--text-sm);font-weight:700}
.hero{min-height:440px;border-radius:var(--radius-xl);background-position:center;background-size:cover;overflow:hidden;display:flex;align-items:center;padding:clamp(24px,5vw,64px)}
.hero__content{width:min(530px,100%)}
.hero__gradient-text{background:var(--gradient-heading);background-clip:text;-webkit-background-clip:text;color:transparent}
/* ChokLotto banner: one continuous strip (title + single CTA), no inner cards */
.promo{display:grid;grid-template-columns:1fr auto;gap:var(--space-10);align-items:center;padding:var(--space-10);border-radius:var(--radius-lg);background:var(--gradient-banner);color:#fff}
.promo__title{color:#fff}
.promo__title-accent{color:var(--color-gold)}
.article-grid,.travel-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-4)}
/* Breakpoints (DESIGN_SYSTEM.md §3): ≥1200 desktop · 768–1199 tablet · ≤767 mobile · ≤390 small */
@media(max-width:1199px){.article-grid,.travel-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:767px){.container{width:min(100% - 32px,var(--container-width))}.section{padding-block:var(--space-10)}.section-card{padding:var(--space-6)}.hero{min-height:420px;padding:var(--space-6);background-position:65% center}.promo{grid-template-columns:1fr;padding:var(--space-6);gap:var(--space-6)}.article-grid,.travel-grid{gap:var(--space-3)}}
@media(max-width:390px){.article-grid,.travel-grid{grid-template-columns:1fr}.btn{width:100%}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}}

/* ThaiLumaGuide branding */
:root {
  --brand-name: 'ThaiLumaGuide';
  --brand-accent: #F47730;
  --brand-lotus-purple: #7424CB;
  --brand-lotus-gold: #F3B33F;
}
.brand-wordmark {font-family:var(--font-heading);font-weight:700;color:var(--color-ink);letter-spacing:-.025em}
.brand-wordmark__accent {color:var(--brand-accent)}
.brand-tagline {font:700 .625rem/1.35 var(--font-body);letter-spacing:.105em;text-transform:uppercase;color:var(--color-ink)}
.btn--choklotto {background:var(--gradient-cta);color:#101B35}