: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: 12px;
  --dark-mode: 0;

  /* App Specific Accent Default (Override in app) */
  --accent: #007aff;
  color-scheme: light dark;
  
  /* Scrollbar aesthetics */
  scrollbar-color: var(--glass-border) transparent;
  
  /* 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;
  }
}

:root.dark-theme, .dark-theme {
  --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: 16px;
  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;
  accent-color: var(--accent);
}

/* Typography modernizations */
h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}

p, blockquote, li {
  text-wrap: pretty;
}

/* Interactivity & Accessibility */
:focus:not(:focus-visible) {
  outline: none;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

@media (pointer: coarse) {
  button, input, select, textarea, a, [role="button"] {
    min-inline-size: 44px;
    min-block-size: 44px;
  }
}

/* Form validation styling */
input:user-invalid, textarea:user-invalid, select:user-invalid {
  border-color: var(--red);
  outline: 1px solid var(--red);
}

input:user-valid, textarea:user-valid, select:user-valid {
  border-color: var(--green);
}

/* Base components utility classes that can be used universally */
.glass-panel {
  background: var(--glass-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

/* View Transitions and Micro Animations */
@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }
}

::view-transition-group(root) {
  animation-duration: 0.3s;
  animation-timing-function: ease-in-out;
}

/* Top-layer micro animations (Dialogs & Popovers) */
dialog,
[popover] {
  opacity: 0;
  transform: scale(0.95);
  transition-property: opacity, transform, display, overlay;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
  transition-behavior: allow-discrete;
}

dialog[open],
[popover]:popover-open {
  opacity: 1;
  transform: scale(1);
  @starting-style {
    opacity: 0;
    transform: scale(0.95);
  }
}

dialog::backdrop,
[popover]::backdrop {
  background-color: rgba(0, 0, 0, 0);
  transition:
    display 0.3s allow-discrete,
    overlay 0.3s allow-discrete,
    background-color 0.3s ease-out;
}

dialog[open]::backdrop,
[popover]:popover-open::backdrop {
  background-color: rgba(0, 0, 0, 0.5);
  @starting-style {
    background-color: rgba(0, 0, 0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  dialog,
  [popover] {
    transform: none;
    transition-duration: 0.1s;
  }
  @starting-style {
    dialog[open],
    [popover]:popover-open {
      transform: none;
    }
  }
}