:root {
  --white: rgba(255, 255, 255, 0.9);
  --lightgrey: rgba(242, 242, 247, 0.8);
  --lightergrey: rgba(235, 235, 245, 0.6);
  --grey: rgba(142, 142, 147, 1);
  --darkgrey: rgba(60, 60, 67, 1);
  --darkergrey: rgba(44, 44, 46, 1);
  --black: rgba(28, 28, 30, 0.9);

  --glass-bg: rgba(255, 255, 255, 0.75);
  --glass-border: rgba(255, 255, 255, 0.5);
  --glass-blur: 30px;

  --background: transparent;
  --suggestions-bg: rgba(255, 255, 255, 0.45);
  --hover: rgba(0, 0, 0, 0.05);
  --header: var(--lightgrey);
  --text: #000000;
  --text-secondary: rgba(60, 60, 67, 0.6);
  --border: rgba(0, 0, 0, 0.1);
  --radius: 16px;
  --dark-mode: 0;

  /* App Specific Accent Default (Override in app) */
  --accent: #007aff;
  
  /* Standard system colors */
  --blue: #007aff;
  --green: #34c759;
  --red: #ff3b30;
  --orange: #ff9500;
  --yellow: #ffcc00;
}

@media (prefers-color-scheme: dark) {
  :root {
    --glass-bg: rgba(28, 28, 30, 0.7);
    --glass-border: rgba(255, 255, 255, 0.1);
    --background: transparent;
    --suggestions-bg: rgba(0, 0, 0, 0.5);
    --hover: rgba(255, 255, 255, 0.1);
    --header: rgba(44, 44, 46, 0.8);
    --text: #ffffff;
    --text-secondary: rgba(235, 235, 245, 0.6);
    --border: rgba(255, 255, 255, 0.1);
    --dark-mode: 1;

    --blue: #0a84ff;
    --green: #30d158;
    --red: #ff453a;
    --orange: #ff9f0a;
    --yellow: #ffd60a;
  }
}

body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.5;
  letter-spacing: -0.022em;
  color: var(--text);
  background: var(--body-bg, url('/shared/bg.png')) no-repeat center center fixed;
  background-size: cover;
}

/* Base components utility classes that can be used universally */
.glass-panel {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

* {
  box-sizing: border-box;
}