/* Copied theme variables for light/dark from project root sui.css */
@font-face {
  font-family: 'Rounded';
  src: url('/assets/fonts/arialrounded.TTF') format('truetype');
  font-weight: normal;
  font-style: normal;
}

:root {
  --main-background: #ffffff;
  --gray1: #F7F7F7;
  --gray2: #EBEBEB;
  --gray3: #C5C5C5;
  --gray4: #A7A7A7;
  --contrast1: #242323;
  --blue-blue: #0F83E9;
  --primary-btn-text: #FFFFFF;
  --line-color: #E0E3E7;
  --background: #FFFFFF;
  --text: #000000;
  --sub-text: rgba(0, 0, 0, 0.8);
  --shadow: rgba(0, 0, 0, 0.08);
  --gradient2: rgba(0, 255, 255, 0);
  --contrast-f7: #F7F7F7;
  --red-red: #D93535;
  --best-gray: #F7F7F7;
  --handle-shadow: inset 3px 3px 4px rgba(0, 0, 0, 0.31);
  --font-arial-rounded-mt: 'Arial Rounded Bold', 'Rounded', sans-serif;
  --forOverlay: rgba(255, 255, 255, 0.5);
}

/* Dark mode - automatically responds to system preference */
@media (prefers-color-scheme: dark) {
  :root {
    --main-background: #000000;
    --gray1: #161818;
    --gray2: #222222;
    --gray3: #7E7E7E;
    --gray4: #7E7E7E;
    --contrast1: #FFFFFF;
    --blue-blue: #0F83E9;
    --primary-btn-text: #FFFFFF;
    --line-color: #22282F;
    --background: #000000;
    --text: #FFFFFF;
    --sub-text: #828282;
    --shadow: rgba(134, 150, 150, 0.15);
    --gradient2: rgba(0, 0, 0, 0);
    --contrast-f7: #161818;
    --red-red: #D93535;
    --best-gray: #222222;
    --handle-shadow: inset 0px 0px 2.5px rgba(255, 255, 255, 0.105);
    --forOverlay: rgba(211, 211, 211, 0.5);
  }
}

/* Simple body styles using variables */
body { background: var(--background); color: var(--text); }