/* ─────────────────────────────────────────────────────────────
   Thailand Expenses Tracker — PrimeNG-inspired tokens
   Default theme: clean enterprise SaaS (blue + neutrals)
   ───────────────────────────────────────────────────────────── */

:root {
  /* — Colors (default = Aura Blue / PrimeNG Sakai) — */
  --primary-50:  #eff6ff;
  --primary-100: #dbeafe;
  --primary-200: #bfdbfe;
  --primary-300: #93c5fd;
  --primary-400: #60a5fa;
  --primary-500: #3b82f6;
  --primary-600: #2563eb;
  --primary-700: #1d4ed8;
  --primary-800: #1e40af;
  --primary-900: #1e3a8a;
  --primary:        var(--primary-600);
  --primary-hover:  var(--primary-700);
  --primary-active: var(--primary-800);
  --primary-tint:   var(--primary-50);
  --primary-soft:   var(--primary-100);

  /* — Surfaces (Slate scale) — */
  --surface-0:    #ffffff;
  --surface-50:   #f8fafc;
  --surface-100:  #f1f5f9;
  --surface-200:  #e2e8f0;
  --surface-300:  #cbd5e1;
  --surface-400:  #94a3b8;
  --surface-500:  #64748b;
  --surface-600:  #475569;
  --surface-700:  #334155;
  --surface-800:  #1e293b;
  --surface-900:  #0f172a;
  --surface-950:  #020617;

  /* Semantic surfaces */
  --bg-app:       var(--surface-100);
  --bg-card:      var(--surface-0);
  --bg-elevated:  var(--surface-0);
  --bg-hover:     var(--surface-50);
  --bg-active:    var(--surface-100);

  /* Borders */
  --border:       var(--surface-200);
  --border-strong: var(--surface-300);
  --divider:      var(--surface-100);

  /* Text */
  --text-primary:   var(--surface-900);
  --text-secondary: var(--surface-600);
  --text-muted:     var(--surface-500);
  --text-disabled:  var(--surface-400);
  --text-inverse:   #ffffff;

  /* — Status — */
  --success-50:  #ecfdf5;
  --success-100: #d1fae5;
  --success-500: #10b981;
  --success-600: #059669;
  --success-700: #047857;

  --warning-50:  #fffbeb;
  --warning-100: #fef3c7;
  --warning-500: #f59e0b;
  --warning-600: #d97706;
  --warning-700: #b45309;

  --danger-50:   #fef2f2;
  --danger-100:  #fee2e2;
  --danger-500:  #ef4444;
  --danger-600:  #dc2626;
  --danger-700:  #b91c1c;

  --info-50:     #eff6ff;
  --info-100:    #dbeafe;
  --info-500:    #3b82f6;
  --info-600:    #2563eb;

  /* User accents */
  --user-syaeful: #6366f1;  /* indigo */
  --user-syaeful-soft: #eef2ff;
  --user-winda:   #ec4899;  /* pink */
  --user-winda-soft: #fdf2f8;
  --user-dina:    #14b8a6;  /* teal */
  --user-dina-soft: #f0fdfa;

  /* — Typography — */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-display: "Inter", -apple-system, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;

  --fs-xs:   0.6875rem;   /* 11 */
  --fs-sm:   0.8125rem;   /* 13 */
  --fs-base: 0.875rem;    /* 14 — PrimeNG default body */
  --fs-md:   0.9375rem;   /* 15 */
  --fs-lg:   1rem;        /* 16 */
  --fs-xl:   1.125rem;    /* 18 */
  --fs-2xl:  1.375rem;    /* 22 */
  --fs-3xl:  1.75rem;     /* 28 */
  --fs-4xl:  2.25rem;     /* 36 */
  --fs-5xl:  3rem;        /* 48 */

  /* — Spacing (4-pt scale) — */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 40px;
  --sp-10: 56px;
  --sp-12: 72px;

  /* — Radius — */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-2xl: 20px;
  --r-pill: 9999px;

  /* — Elevation — */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05), 0 1px 3px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.07), 0 2px 4px -2px rgba(15, 23, 42, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -4px rgba(15, 23, 42, 0.06);
  --shadow-xl: 0 20px 25px -5px rgba(15, 23, 42, 0.1), 0 8px 10px -6px rgba(15, 23, 42, 0.06);

  --ring-focus: 0 0 0 3px rgba(59, 130, 246, 0.35);

  /* — Density — */
  --row-h: 44px;       /* table row height (comfortable) */
  --field-h: 38px;     /* form field height */
  --gap-row: 8px;
}

/* Density: compact */
[data-density="compact"] {
  --row-h: 36px;
  --field-h: 32px;
  --sp-3: 8px;
  --sp-4: 12px;
  --sp-5: 14px;
  --sp-6: 16px;
  --fs-base: 0.8125rem;
}

/* Dark theme */
[data-theme="dark"] {
  --bg-app:      var(--surface-950);
  --bg-card:     #0b1220;
  --bg-elevated: #111827;
  --bg-hover:    #1e293b;
  --bg-active:   #1e293b;
  --border:      #1f2937;
  --border-strong: #334155;
  --divider:     #111827;
  --text-primary:   #f1f5f9;
  --text-secondary: #cbd5e1;
  --text-muted:     #94a3b8;
  --text-disabled:  #475569;

  --user-syaeful-soft: #1e1b4b;
  --user-winda-soft:   #4c1330;
  --user-dina-soft:    #134e4a;

  --primary-tint: #172554;
  --primary-soft: #1e3a8a;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.45), 0 1px 3px rgba(0,0,0,0.35);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.45), 0 2px 4px -2px rgba(0,0,0,0.35);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.5), 0 4px 6px -4px rgba(0,0,0,0.35);
}

/* Accent theme variant: warm (orange) */
[data-accent="warm"] {
  --primary-50:  #fff7ed;
  --primary-100: #ffedd5;
  --primary-200: #fed7aa;
  --primary-500: #f97316;
  --primary-600: #ea580c;
  --primary-700: #c2410c;
  --primary-800: #9a3412;
  --primary:        var(--primary-600);
  --primary-hover:  var(--primary-700);
  --primary-active: var(--primary-800);
  --primary-tint:   var(--primary-50);
  --primary-soft:   var(--primary-100);
  --ring-focus: 0 0 0 3px rgba(249, 115, 22, 0.35);
}

[data-accent="teal"] {
  --primary-50:  #f0fdfa;
  --primary-100: #ccfbf1;
  --primary-200: #99f6e4;
  --primary-500: #14b8a6;
  --primary-600: #0d9488;
  --primary-700: #0f766e;
  --primary-800: #115e59;
  --primary:        var(--primary-600);
  --primary-hover:  var(--primary-700);
  --primary-active: var(--primary-800);
  --primary-tint:   var(--primary-50);
  --primary-soft:   var(--primary-100);
  --ring-focus: 0 0 0 3px rgba(20, 184, 166, 0.35);
}

/* Typography pairing variants */
[data-typeface="grotesk"] {
  --font-sans: "Space Grotesk", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: "Space Grotesk", sans-serif;
}
[data-typeface="serif-display"] {
  --font-display: "Source Serif 4", "Source Serif Pro", Georgia, serif;
}
[data-typeface="mono-accent"] {
  --font-display: "JetBrains Mono", ui-monospace, monospace;
}

/* ────────── Reset & base ────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.5;
  color: var(--text-primary);
  background: var(--bg-app);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "cv11", "ss01", "ss03";
}
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; font-size: inherit; }

/* tabular numbers everywhere amounts appear */
.tnum { font-variant-numeric: tabular-nums; }