:root {
  /* Brand Colors */
  --color-blue: #225C9C;
  --color-blue-light: #2D6FB5;
  --color-blue-dark: #1A4A7D;
  --color-green: #249E6C;
  --color-green-light: #2DB87E;
  --color-green-dark: #1D7F57;
  --color-gold: #F4B400;
  --color-gold-light: #FFD54F;
  --color-gold-dark: #C89200;
  --color-red: #D93025;
  --color-red-light: #EF5350;
  --color-red-dark: #B71C1C;
  --color-purple: #7B5EA7;
  --color-purple-light: #9478BF;
  --color-purple-dark: #5F4682;
  --color-orange: #E87C3E;
  --color-orange-light: #F0965F;
  --color-orange-dark: #C25F26;

  /* Surfaces */
  --color-background: #F8F6F0;
  --color-card: #FEFDFB;
  --color-card-hover: #FDFCF8;

  /* Text */
  --color-text-primary: #1E293B;
  --color-text-secondary: #64748B;
  --color-text-muted: #94A3B8;
  --color-text-inverse: #FFFFFF;

  /* Semantic (attendance) */
  --color-attending: var(--color-green);
  --color-maybe: var(--color-gold);
  --color-absent: var(--color-red);
  --color-no-response: #94A3B8;

  /* Typography.
     "… Variable" first: the app self-hosts both families as variable fonts via
     @fontsource (see app/src/app/styles/global.css). The plain family name stays in the
     chain for www/, which still loads Grandstander/DM Sans from the Google Fonts CDN. */
  --font-display: 'Grandstander Variable', 'Grandstander', cursive;
  --font-body: 'DM Sans Variable', 'DM Sans', sans-serif;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;

  /* Spacing */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-full: 9999px;

  /* Shadows (warm-tinted) */
  --shadow-sm: 0 1px 2px rgba(120, 80, 40, 0.06);
  --shadow-md: 0 4px 6px rgba(120, 80, 40, 0.08);
  --shadow-lg: 0 10px 15px rgba(120, 80, 40, 0.1);
  --shadow-card: 0 2px 8px rgba(120, 80, 40, 0.06);
  --shadow-card-hover: 0 8px 24px rgba(120, 80, 40, 0.12);

  /* Animation */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-slow: 400ms;

  /* Z-index */
  --z-dropdown: 50;
  --z-sticky: 100;
  --z-nav: 200;
  --z-modal: 300;
  --z-toast: 400;
}