/* ============================================================
 * Pukdee Design System — Tokens v1.0
 * Last Updated: 2026-05-20
 * 
 * แหล่งความจริงเดียวสำหรับ design values ทั้งหมด
 * อ้างอิงจาก DESIGN.md — ห้ามแก้ค่าโดยตรงในไฟล์อื่น
 * ============================================================ */

:root {
  /* ----------------------------------------------------------
   * 1. BRAND COLORS — Primary Green (Teal Ramp)
   * ---------------------------------------------------------- */
  --brand-50:  #E1F5EE;
  --brand-100: #9FE1CB;
  --brand-200: #5DCAA5;
  --brand-300: #2EB286;
  --brand-500: #1D9E75;   /* PRIMARY */
  --brand-700: #0F6E56;   /* Hover/Active */
  --brand-800: #085041;
  --brand-900: #04342C;

  /* ----------------------------------------------------------
   * 2. NEUTRALS — Warm Cream (Gray Ramp)
   * ---------------------------------------------------------- */
  --bg-canvas:     #FAFAF7;
  --bg-surface:    #FFFFFF;
  --bg-muted:      #F1EFE8;
  --bg-subtle:     #F8F7F4;
  --border:        #D3D1C7;
  --border-strong: #B4B2A9;
  --text-mute:     #888780;
  --text-sub:      #5F5E5A;
  --text-body:     #2C2C2A;
  --text-heading:  #1A1A19;

  /* ----------------------------------------------------------
   * 3. ACCENT — Warm Amber (Secondary CTA, Warning)
   * ---------------------------------------------------------- */
  --accent-50:  #FAEEDA;
  --accent-200: #FAC775;
  --accent-400: #EF9F27;
  --accent-700: #BA7517;
  --accent-800: #854F0B;

  /* ----------------------------------------------------------
   * 4. SEMANTIC COLORS
   * ---------------------------------------------------------- */
  /* Success */
  --success-bg:     #E1F5EE;
  --success-text:   #0F6E56;
  --success-border: #5DCAA5;
  --success-strong: #1D9E75;

  /* Warning */
  --warning-bg:     #FAEEDA;
  --warning-text:   #854F0B;
  --warning-border: #FAC775;
  --warning-strong: #EF9F27;

  /* Danger */
  --danger-bg:      #FCEBEB;
  --danger-text:    #A32D2D;
  --danger-border:  #F09595;
  --danger-strong:  #E24B4A;

  /* Info */
  --info-bg:        #E6F1FB;
  --info-text:      #0C447C;
  --info-border:    #85B7EB;
  --info-strong:    #2D7DD2;

  /* ----------------------------------------------------------
   * 5. PLATFORM BRAND COLORS (Chat tabs)
   * ---------------------------------------------------------- */
  --platform-line:      #06C755;
  --platform-messenger: #0084FF;
  --platform-instagram: #E1306C;

  /* ----------------------------------------------------------
   * 6. TYPOGRAPHY
   * ---------------------------------------------------------- */
  --font-sans: 'Prompt', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'Menlo', 'Monaco', 'Courier New', monospace;

  /* Type scale */
  --text-h1:    24px;
  --text-h2:    18px;
  --text-h3:    15px;
  --text-body:  15px;
  --text-sm:    14px;
  --text-cap:   12px;
  --text-mini:  11px;

  /* Line heights */
  --leading-tight:   1.3;
  --leading-snug:    1.4;
  --leading-normal:  1.6;
  --leading-relaxed: 1.7;

  /* Font weights — ใช้แค่ 2 weights */
  --weight-regular: 400;
  --weight-medium:  500;

  /* ----------------------------------------------------------
   * 7. SPACING — scale 4/8/12/16/20/24/32/40/56
   * ---------------------------------------------------------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-14: 56px;

  /* ----------------------------------------------------------
   * 8. BORDER RADIUS
   * ---------------------------------------------------------- */
  --radius-sm:   6px;    /* Tag, badge */
  --radius-md:   10px;   /* Button, input */
  --radius-lg:   14px;   /* Card, modal */
  --radius-xl:   20px;   /* Hero card, panel */
  --radius-full: 9999px; /* Pill, avatar */

  /* ----------------------------------------------------------
   * 9. SHADOWS
   * ---------------------------------------------------------- */
  --shadow-xs:    0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm:    0 2px 6px rgba(0, 0, 0, 0.05);
  --shadow-md:    0 4px 12px rgba(0, 0, 0, 0.06);
  --shadow-lg:    0 8px 24px rgba(0, 0, 0, 0.08);
  --shadow-xl:    0 16px 48px rgba(0, 0, 0, 0.10);
  --shadow-focus: 0 0 0 3px rgba(29, 158, 117, 0.18);

  /* ----------------------------------------------------------
   * 10. Z-INDEX SCALE
   * ---------------------------------------------------------- */
  --z-dropdown: 1000;
  --z-sticky:   1010;
  --z-nav:      1020;
  --z-modal-bg: 1030;
  --z-modal:    1040;
  --z-toast:    1050;
  --z-tooltip:  1060;

  /* ----------------------------------------------------------
   * 11. TRANSITIONS
   * ---------------------------------------------------------- */
  --transition-fast:  150ms ease;
  --transition-base:  250ms ease;
  --transition-slow:  350ms ease;

  /* ----------------------------------------------------------
   * 12. BREAKPOINTS (for JS reference — CSS ใช้ @media)
   * ---------------------------------------------------------- */
  --bp-sm:  640px;
  --bp-md:  768px;
  --bp-lg:  1024px;
  --bp-xl:  1280px;
  --bp-2xl: 1440px;

  /* ----------------------------------------------------------
   * 13. LAYOUT
   * ---------------------------------------------------------- */
  --sidebar-width:        280px;
  --sidebar-collapsed:    72px;
  --topbar-height:        64px;
  --bottomnav-height:     64px;
  --container-max:        1440px;
  --container-padding-sm: 16px;
  --container-padding-lg: 24px;
}

/* ============================================================
 * DARK MODE
 * ============================================================ */
html.dark {
  /* Neutrals — swap to dark warm */
  --bg-canvas:     #1A1B1A;
  --bg-surface:    #242523;
  --bg-muted:      #2F302D;
  --bg-subtle:     #2A2B28;
  --border:        #3E403C;
  --border-strong: #525550;
  --text-mute:     #8A8D86;
  --text-sub:      #B0B3AC;
  --text-body:     #E4E6DF;
  --text-heading:  #F5F7F0;

  /* Brand — lighter for dark contrast */
  --brand-50:  #04342C;   /* swap — dark backgrounds */
  --brand-100: #085041;
  --brand-200: #0F6E56;
  --brand-300: #1D9E75;
  --brand-500: #2EB286;   /* PRIMARY (lighter for dark) */
  --brand-700: #5DCAA5;   /* Hover (lighter) */
  --brand-800: #9FE1CB;   /* Text on dark bg */
  --brand-900: #E1F5EE;

  /* Semantic — adjust for dark */
  --success-bg:     #0F2E26;
  --success-text:   #5DCAA5;
  --success-border: #1D9E75;

  --warning-bg:     #3D2E0B;
  --warning-text:   #FAC775;
  --warning-border: #BA7517;

  --danger-bg:      #3D1818;
  --danger-text:    #F09595;
  --danger-border:  #A32D2D;

  --info-bg:        #0F2438;
  --info-text:      #85B7EB;
  --info-border:    #2D7DD2;

  /* Accent — adjust */
  --accent-50:  #3D2E0B;
  --accent-400: #EF9F27;
  --accent-700: #FAC775;

  /* Shadows — softer */
  --shadow-xs:    0 1px 2px rgba(0, 0, 0, 0.20);
  --shadow-sm:    0 2px 6px rgba(0, 0, 0, 0.25);
  --shadow-md:    0 4px 12px rgba(0, 0, 0, 0.30);
  --shadow-lg:    0 8px 24px rgba(0, 0, 0, 0.40);
  --shadow-xl:    0 16px 48px rgba(0, 0, 0, 0.50);
  --shadow-focus: 0 0 0 3px rgba(46, 178, 134, 0.25);
}

/* ============================================================
 * REDUCED MOTION
 * ============================================================ */
@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: 0ms;
    --transition-base: 0ms;
    --transition-slow: 0ms;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}