/* ===================================================================
   LIA EMS -- variables.css
   CSS Custom Properties, Resets, and Base Styles
   =================================================================== */

:root {
  /* -- Primary Colors -- */
  --blue: #4472C4;
  --blue2: #2F5496;
  --blue3: #D9E2F3;
  --blue-lt: #EEF3FB;
  --blue-dk: #1A3A6B;
  --navy: #0B2545;
  --teal: #0891B2;
  --teal2: #0E7490;
  --teal-p: rgba(8, 145, 178, .1);
  --green: #059669;
  --green-p: rgba(5, 150, 105, .12);
  --red: #DC2626;
  --red-p: rgba(220, 38, 38, .1);
  --amber: #D97706;
  --amber-p: rgba(217, 119, 6, .1);
  --orange: #C2610F;
  --orange-p: rgba(194, 97, 15, .1);
  --purple: #7C3AED;
  --purple-p: rgba(124, 58, 237, .1);

  /* -- AI Colors -- */
  --ai: #6D28D9;
  --ai2: #5B21B6;
  --ai-p: rgba(109, 40, 217, .12);
  --ai-lt: rgba(109, 40, 217, .06);
  --ai-glow: rgba(109, 40, 217, .3);
  --ai-border: rgba(109, 40, 217, .25);

  /* -- Semantic / Surface -- */
  --bg: #F0F4F8;
  --white: #fff;
  --surf: #F8FAFC;
  --tx: #0F172A;
  --tx2: #334155;
  --tx3: #64748B;
  --tx4: #94A3B8;
  --bd: #E2E8F0;
  --bd2: #CBD5E1;

  /* -- Shadows -- */
  --sh: 0 1px 3px rgba(15, 23, 42, .06), 0 1px 2px rgba(15, 23, 42, .04);
  --sh2: 0 4px 14px rgba(15, 23, 42, .1);
  --sh-ai: 0 4px 20px rgba(109, 40, 217, .2);

  /* -- Border Radius -- */
  --r: 6px;
  --r2: 10px;

  /* -- Font -- */
  --mono: 'JetBrains Mono', monospace;
}

/* -- Box-sizing Reset -- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* -- Base Styles -- */
html {
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  font-family: 'Sarabun', sans-serif;
  background: var(--bg);
  color: var(--tx);
  font-size: 13px;
  line-height: 1.5;
}