/* eLMIS AI Assistant — shared M3 color tokens for Tailwind-converted pages.
   Same values as the :root / [data-theme="light"] blocks in app.css (that
   file's copy is untouched — every legacy page still depends on it) — kept
   here too so pages migrated to Tailwind utilities don't need to load the
   ~2,400 lines of legacy component classes just to get the color variables
   Tailwind's config (static/js/tailwind-theme-config.js) maps utilities onto.
   Keep both copies in sync if the palette ever changes. */
@import url('/static/vendor/fonts/fonts.css');

:root {
  --bg:              #0D1514;
  --sc-lowest:       #091110;
  --sc-low:          #151E1E;
  --sc:              #1B2626;
  --sc-high:         #253131;
  --sc-highest:      #2F3E3E;

  --primary:         #80CBC4;
  --on-primary:      #003733;
  --primary-cnt:     #00504B;
  --on-primary-cnt:  #9EF2EB;

  --secondary:       #B2CDCB;
  --on-secondary:    #1D3533;
  --secondary-cnt:   #334B49;
  --on-secondary-cnt:#CEE9E7;

  --tertiary:        #F6BE7B;
  --tertiary-cnt:    #5C3F1B;
  --on-tertiary-cnt: #FFDDB8;

  --error:           #FFB4AB;
  --error-cnt:       #93000A;
  --on-error-cnt:    #FFDAD6;

  --on-surface:         #DDE4E3;
  --on-surface-variant: #B9C8C7;
  --outline:            #839392;
  --outline-variant:    #3F4E4D;

  --shadow-1: 0 1px 3px rgba(0,0,0,0.5);
  --shadow-2: 0 2px 8px rgba(0,0,0,0.5);
  --shadow-3: 0 4px 16px rgba(0,0,0,0.55);
}

[data-theme="light"] {
  --bg:              #FFFFFF;
  --sc-lowest:       #FFFFFF;
  --sc-low:          #F5F5F5;
  --sc:              #E0F2F1;
  --sc-high:         #F8F8F8;
  --sc-highest:      #F0F0F0;

  --primary:         #006B63;
  --on-primary:      #FFFFFF;
  --primary-cnt:     #9EF2EB;
  --on-primary-cnt:  #00201E;

  --secondary:       #4A6361;
  --on-secondary:    #FFFFFF;
  --secondary-cnt:   #CBE8E6;
  --on-secondary-cnt:#051F1E;

  --tertiary:        #7B5800;
  --tertiary-cnt:    #FFDEA3;
  --on-tertiary-cnt: #261900;

  --error:           #B3261E;
  --error-cnt:       #F9DEDC;
  --on-error-cnt:    #410E0B;

  --on-surface:         #161D1D;
  --on-surface-variant: #3F4948;
  --outline:            #9E9E9E;
  --outline-variant:    #E0E0E0;

  --shadow-1: 0 1px 2px rgba(0,0,0,0.10), 0 1px 3px rgba(0,0,0,0.06);
  --shadow-2: 0 2px 6px rgba(0,0,0,0.10), 0 1px 2px rgba(0,0,0,0.08);
  --shadow-3: 0 4px 12px rgba(0,0,0,0.12), 0 2px 4px rgba(0,0,0,0.08);
}

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

html, body { font-family: 'Roboto', system-ui, -apple-system, sans-serif; height: 100%; margin: 0; padding: 0; }