/* ══════════════════════════════════════════════
   Design Tokens — Softever Benefits
   Telegram CSS Variables + fallback values
   ตาม spec §6.7 Design Tokens
   ══════════════════════════════════════════════ */

:root {
  /* ─── Base — Telegram theme เป็น primary ─── */
  --bg:             var(--tg-theme-bg-color, #FFFFFF);
  --bg-secondary:   var(--tg-theme-secondary-bg-color, #F5F5F5);
  --bg-section:     var(--tg-theme-section-bg-color, #FFFFFF);
  --bg-header:      var(--tg-theme-header-bg-color, #FFFFFF);
  --text:           var(--tg-theme-text-color, #000000);
  --text-secondary: var(--tg-theme-hint-color, #999999);
  --text-subtitle:  var(--tg-theme-subtitle-text-color, #999999);
  --text-section-header: var(--tg-theme-section-header-text-color, #6D6D72);
  --text-accent:    var(--tg-theme-accent-text-color, #007AFF);
  --text-link:      var(--tg-theme-link-color, #007AFF);
  --text-destructive: var(--tg-theme-destructive-text-color, #FF3B30);
  --btn-bg:         var(--tg-theme-button-color, #000000);
  --btn-text:       var(--tg-theme-button-text-color, #FFFFFF);
  --border:         #E5E5E5;
  --divider:        #F0F0F0;

  /* ─── Accent — เฉพาะ icon/status เท่านั้น ─── */
  --green:   #34C759;
  --red:     #FF3B30;
  --blue:    #007AFF;
  --orange:  #FF9500;
  --purple:  #AF52DE;

  /* ─── Accent aliases (used in pages) ─── */
  --accent-green:    var(--green);
  --accent-red:      var(--red);
  --accent-blue:     var(--blue);
  --accent-yellow:   var(--orange);
  --accent-blue-bg:  rgba(0, 122, 255, 0.1);
  --accent-red-bg:   rgba(255, 59, 48, 0.1);

  /* ─── Spacing (4px base) ─── */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  32px;

  /* ─── Typography ─── */
  --font:           -apple-system, 'SF Pro Text', system-ui, sans-serif;
  --text-xs:        11px;
  --text-sm:        13px;
  --text-base:      15px;
  --text-lg:        17px;
  --text-xl:        20px;
  --text-2xl:       24px;
  --weight-normal:  400;
  --weight-medium:  500;
  --weight-bold:    600;

  /* ─── Border Radius ─── */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-full: 9999px;

  /* ─── Shadow (minimal) ─── */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* ─── Dark mode — Telegram sets tg-color-scheme or prefers-color-scheme ─── */
@media (prefers-color-scheme: dark) {
  :root {
    --bg:             var(--tg-theme-bg-color, #1C1C1E);
    --bg-secondary:   var(--tg-theme-secondary-bg-color, #2C2C2E);
    --bg-section:     var(--tg-theme-section-bg-color, #2C2C2E);
    --bg-header:      var(--tg-theme-header-bg-color, #1C1C1E);
    --text:           var(--tg-theme-text-color, #FFFFFF);
    --text-secondary: var(--tg-theme-hint-color, #8E8E93);
    --text-subtitle:  var(--tg-theme-subtitle-text-color, #8E8E93);
    --text-section-header: var(--tg-theme-section-header-text-color, #8E8E93);
    --text-accent:    var(--tg-theme-accent-text-color, #0A84FF);
    --text-link:      var(--tg-theme-link-color, #0A84FF);
    --text-destructive: var(--tg-theme-destructive-text-color, #FF453A);
    --btn-bg:         var(--tg-theme-button-color, #0A84FF);
    --btn-text:       var(--tg-theme-button-text-color, #FFFFFF);
    --border:  #38383A;
    --divider: #2C2C2E;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.4);
    --accent-blue-bg:  rgba(10, 132, 255, 0.15);
    --accent-red-bg:   rgba(255, 69, 58, 0.15);
  }
}