/* ==========================================================================
   Base — reset, design tokens and global typography
   ========================================================================== */

:root {
  /* Palette — slate (neutrals) */
  --color-white: #fff;
  --color-slate-50: #F8FAFC;
  --color-slate-75: #EEF2F6;
  --color-slate-100: #F1F5F9;
  --color-slate-200: #E2E8F0;
  --color-slate-300: #CBD5E1;
  --color-slate-400: #94A3B8;
  --color-slate-500: #64748B;
  --color-slate-600: #475569;
  --color-slate-700: #334155;
  --color-slate-800: #1E293B;
  --color-slate-900: #0F172A;
  --color-slate-900-a10: #0F172A1a;
  --color-slate-900-a12: #0F172A1f;
  --color-slate-900-a18: #0F172A2e;
  --color-slate-900-a25: #0F172A40;
  --color-slate-900-a35: #0F172A59;

  /* Palette — brand green */
  --color-green-50: #F0FDF4;
  --color-green-100: #DCFCE7;
  --color-green-200: #BBF7D0;
  --color-green-300: #86EFAC;
  --color-green-400: #4ADE80;
  --color-green-600: #16A34A;
  --color-green-700: #15803D;
  --color-green-800: #166534;
  --color-green-900: #14532D;
  --color-green-600-a13: #16A34A22;
  --color-green-600-a15: #16A34A26;
  --color-green-600-a18: #16A34A2e;

  /* Palette — status tones */
  --color-lime-100: #ECFCCB;
  --color-lime-800: #3F6212;
  --color-blue-50: #EFF6FF;
  --color-blue-100: #DBEAFE;
  --color-blue-500: #3B82F6;
  --color-blue-600: #2563EB;
  --color-blue-800: #1E40AF;
  --color-blue-900: #1E3A8A;
  --color-violet-100: #EDE9FE;
  --color-violet-300: #C4B5FD;
  --color-violet-400: #A78BFA;
  --color-violet-500: #8B5CF6;
  --color-violet-600: #7C3AED;
  --color-violet-800: #5B21B6;
  --color-amber-50: #FFFBEB;
  --color-amber-100: #FEF3C7;
  --color-amber-200: #FDE68A;
  --color-amber-500: #F59E0B;
  --color-amber-700: #B45309;
  --color-amber-800: #92400E;
  --color-amber-900: #78350F;
  --color-red-50: #FEF2F2;
  --color-red-100: #FEE2E2;
  --color-red-600: #DC2626;
  --color-red-700: #B91C1C;
  --color-red-800: #991B1B;
  --color-red-900: #7F1D1D;
  --color-cyan-100: #CFFAFE;
  --color-cyan-800: #155E75;
  --color-pink-100: #FCE7F3;
  --color-pink-800: #9D174D;

  /* Semantic colors */
  --color-bg: var(--color-slate-50);
  --color-surface: var(--color-white);
  --color-text: var(--color-slate-900);
  --color-text-muted: var(--color-slate-500);
  --color-text-subtle: var(--color-slate-400);
  --color-border: var(--color-slate-200);
  --color-border-strong: var(--color-slate-300);
  --color-divider: var(--color-slate-100);
  --color-accent: var(--color-green-600);
  --color-accent-strong: var(--color-green-700);
  --color-accent-hover: var(--color-green-800);

  /* Typography */
  --font-sans: 'Geist', 'Noto Sans Thai', system-ui, sans-serif;
  --font-mono: 'Geist Mono', 'Noto Sans Thai', ui-monospace, monospace;
  --font-script: 'Brush Script MT', 'Segoe Script', cursive;
  --font-size-100: 10.5px;
  --font-size-200: 11px;
  --font-size-300: 11.5px;
  --font-size-400: 12px;
  --font-size-500: 12.5px;
  --font-size-600: 13px;
  --font-size-700: 13.5px;
  --font-size-800: 14px;
  --font-size-900: 15px;
  --font-size-h1: 19px;
  --font-size-kpi-md: 21px;
  --font-size-h2: 24px;
  --font-size-kpi: 26px;

  /* Spacing */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 32px;
  --page-gutter: 28px;
  --section-gap: 18px;
  --grid-gap: 16px;

  /* Radii */
  --radius-xs: 6px;
  --radius-bar: 5px;
  --radius-sm: 8px;
  --radius-input: 9px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 999px;
  --radius-round: 50%;

  /* Shadows */
  --shadow-raised: 0 1px 2px var(--color-slate-900-a10);
  --shadow-focus: 0 0 0 3px var(--color-green-600-a15);
  --shadow-popover: 0 18px 40px var(--color-slate-900-a12);
  --shadow-toast: 0 16px 40px var(--color-slate-900-a25);
  --shadow-drawer: -16px 0 48px var(--color-slate-900-a18);
  --shadow-modal: 0 30px 80px var(--color-slate-900-a25);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--font-size-800);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--color-accent-strong);
  text-decoration: none;
}

a:hover {
  color: var(--color-accent-hover);
  text-decoration: underline;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

h1,
h2,
h3,
h4,
p {
  margin: 0;
}

.mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.i {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}

.i.sm {
  width: 15px;
  height: 15px;
}

.i.lg {
  width: 22px;
  height: 22px;
}

.h1 {
  font-size: var(--font-size-h1);
  font-weight: 600;
  letter-spacing: -.015em;
}

.h2 {
  font-size: var(--font-size-h2);
  font-weight: 600;
  letter-spacing: -.02em;
}

.sub {
  color: var(--color-text-muted);
  font-size: var(--font-size-600);
}

@media (max-width: 760px) {
  .h2 {
    font-size: var(--font-size-kpi-md);
  }
}