@import "tailwindcss";

@layer base {
  :root {
    --font-sans: 'Public Sans', system-ui, -apple-system, sans-serif;
  }
}

/* Light Mode (Serene Warm Paper - as provided in spec CSS) */
.theme-light {
  --bg: #F5F4EF;
  --surface: #FFFFFF;
  --surface-alt: #EFECE1;
  --ink: #23281F;
  --ink-soft: #5C6355;
  --border: #E1DFD4;
  --accent: #2B4A5E;
  --accent-soft: #DCE6EA;
  --danger: #B33F3F;
  --danger-soft: #F5E1DF;
  --warning: #B4762A;
  --warning-soft: #F3E7D4;
  --success: #3F7D53;
  --success-soft: #DEECE1;
  background-color: var(--bg);
  color: var(--ink);
}

/* Dark Mode (OLED Tablet Kiosk - as shown in screenshots 1, 2, 4) */
.theme-dark {
  --bg: #121513;
  --surface: #1E2320;
  --surface-alt: #262D29;
  --ink: #F0F4ED;
  --ink-soft: #9BA498;
  --border: #2D352F;
  --accent: #17364D;
  --accent-soft: #244760;
  --danger: #E05353;
  --danger-soft: #421818;
  --warning: #E5983A;
  --warning-soft: #422B11;
  --success: #4EAA6A;
  --success-soft: #183823;
  background-color: var(--bg);
  color: var(--ink);
}

body {
  font-family: var(--font-sans);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
}

/* Custom scrollbars for tablet kiosk */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(150, 150, 150, 0.25);
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(150, 150, 150, 0.4);
}