/* 24Livestream — Design tokens. Light theme (white tone). */
:root{
  /* Base surfaces */
  --bg:        #F4F5F8;
  --surface-1: #FFFFFF;
  --surface-2: #FFFFFF;
  --surface-3: #ECEDF1;

  /* Text scale (dark ink on light) */
  --text:    #16161C;
  --text-1:  #26262E;
  --text-2:  #4B4B57;
  --text-3:  #34343D;
  --muted:   #64646F;
  --muted-2: #74747F;
  --muted-3: #84848E;
  --muted-4: #90909B;

  /* Brand */
  --brand-pink:   #FF2E63;
  --brand-orange: #FF6B3D;
  --brand-link:   #F5324F;
  --brand-link-2: #E24A2E;
  --brand-grad:   linear-gradient(135deg,#FF2E63,#FF6B3D);

  /* Accent */
  --success: #0e9d6e;

  /* Borders (dark ink at low alpha) */
  --line-1: rgba(17,17,25,.07);
  --line-2: rgba(17,17,25,.10);
  --line-3: rgba(17,17,25,.14);
  --line-4: rgba(17,17,25,.20);

  /* Fills (dark ink at low alpha) */
  --fill-1: rgba(17,17,25,.02);
  --fill-2: rgba(17,17,25,.035);
  --fill-3: rgba(17,17,25,.06);
  --glass:  rgba(255,255,255,.72);

  /* Fonts */
  --font-head: 'Bai Jamjuree', system-ui, -apple-system, sans-serif;
  --font-body: 'IBM Plex Sans Thai', system-ui, -apple-system, sans-serif;

  /* Radius */
  --r-pill: 999px;
  --r-card: 20px;
  --r-card-lg: 22px;
  --r-input: 12px;
  --r-icon: 14px;
  --r-badge: 7px;

  /* Shadow */
  --shadow-brand:    0 8px 22px rgba(255,46,99,.28);
  --shadow-brand-lg: 0 12px 30px rgba(255,46,99,.30);
  --shadow-card:     0 24px 60px rgba(20,22,45,.14);
  --shadow-float:    0 16px 40px rgba(20,22,45,.12);

  /* Layout */
  --pad-x: clamp(20px,5vw,64px);
  --sec-y: clamp(48px,7vw,88px);
  --maxw:  1240px;
}