/**
 * style.css - Global styles & Material Design 3 color tokens
 */

/* ── Color tokens (Material Design 3 - Purple scheme) ─────────────────── */
:root {
  --primary:              #6750A4;
  --on-primary:           #FFFFFF;
  --primary-container:    #EADDFF;
  --on-primary-container: #21005D;
  --primary-dark:         #5940a0;

  --secondary:            #625B71;
  --on-secondary:         #FFFFFF;
  --secondary-container:  #E8DEF8;

  --surface:              #FFFBFE;
  --surface-variant:      #F7F2FA;
  --on-surface:           #1C1B1F;
  --on-surface-variant:   #49454F;

  --background:           #F4F6FB;
  --outline:              #CAC4D0;
  --outline-variant:      #E6E1E5;

  --error:                #B3261E;
  --on-error:             #FFFFFF;
  --error-container:      #F9DEDC;

  --success:              #16A34A;
  --warning:              #D97706;
  --info:                 #2563EB;
}

/* ── Reset & base ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { font-size: 16px; }

body {
  margin: 0;
  font-family: 'Noto Sans Thai', 'Sarabun', system-ui, -apple-system, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--on-surface);
  background: var(--background);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--primary); }
a:hover { color: var(--primary-dark); }

img { max-width: 100%; height: auto; }

/* ── Scrollbar ─────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--outline); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--secondary); }

 body { display: flex; min-height: 100vh; background: var(--background, #f4f6fb); margin: 0; }