:root {
  --glass-opacity: 0.18;
  --glass-light: rgba(255, 255, 255, var(--glass-opacity));
  --glass-light-border: rgba(255, 255, 255, 0.35);
  --glass-dark: rgba(0, 0, 0, var(--glass-opacity));
  --glass-dark-border: rgba(0, 0, 0, 0.15);
  --glass-blur: blur(18px);
  --glass-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
  --accent-blue: #7AB8D4;
  --accent-yellow: #F0C96E;
  --accent-blue-glass: rgba(122, 184, 212, 0.25);
  --font-primary: 'Inter', 'DM Sans', system-ui, sans-serif;
  --font-weight-heading: 600;
  --font-weight-body: 400;
  --font-weight-label: 500;
  --card-radius: 16px;
  --card-padding: 20px;
  --card-gap: 14px;
  --section-gap: 24px;
  --transition-fade: opacity 0.4s ease;
  --transition-bg: background-image 0.8s ease;
  --nav-height-mobile: 64px;
  --nav-height-desktop: 56px;
  --content-bg: #FAF7F2;

  --coral: #E8756A;
  --green: #6FBF8B;
  --text-dark: #2B2B2B;
  --text-gray: #8A8A8A;
}

[data-glass="light"] .card {
  background: var(--glass-light);
  border: 1px solid var(--glass-light-border);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow);
  border-radius: var(--card-radius);
}
[data-glass="dark"] .card {
  background: var(--glass-dark);
  border: 1px solid var(--glass-dark-border);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow);
  border-radius: var(--card-radius);
}