/* =============================================
   TT Club Manager — Liquid Glass Effects (glass.css)
   =============================================
   Apple-inspired liquid glass design system.
   Automatically switches between light and dark
   variants based on [data-theme] on <html>.
   ============================================= */

/* --- Glass Design Tokens (Light) --- */
:root {
  /* Glass backgrounds */
  --glass-bg: rgba(248, 253, 251, 0.8);
  --glass-bg-hover: rgba(255, 255, 255, 0.92);

  /* Blur values */
  --glass-blur-sm: 10px;
  --glass-blur-md: 24px;
  --glass-blur-lg: 40px;

  /* Glass borders */
  --glass-border: 1px solid rgba(23, 122, 122, 0.16);

  /* Glass shadows */
  --glass-shadow: 0 6px 26px rgba(15, 46, 42, 0.10);
  --glass-shadow-elevated: 0 8px 40px rgba(0, 0, 0, 0.12);

  /* Glass saturation */
  --glass-saturate: 2.0;
}

/* --- Glass Design Tokens (Dark) --- */
[data-theme="dark"] {
  --glass-bg: rgba(26, 46, 53, 0.60);
  --glass-bg-hover: rgba(36, 60, 68, 0.75);
  --glass-border: 1px solid rgba(255, 255, 255, 0.10);
  --glass-shadow: 0 4px 24px rgba(0, 0, 0, 0.30);
  --glass-shadow-elevated: 0 8px 40px rgba(0, 0, 0, 0.45);
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme]) {
    --glass-bg: rgba(26, 46, 53, 0.60);
    --glass-bg-hover: rgba(36, 60, 68, 0.75);
    --glass-border: 1px solid rgba(255, 255, 255, 0.10);
    --glass-shadow: 0 4px 24px rgba(0, 0, 0, 0.30);
    --glass-shadow-elevated: 0 8px 40px rgba(0, 0, 0, 0.45);
  }
}

/* --- Glass Utility Classes --- */

/* Standard glass panel */
.glass {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur-md)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur-md)) saturate(var(--glass-saturate));
  border: var(--glass-border);
  box-shadow: var(--glass-shadow);
}

/* Subtle glass — lighter effect */
.glass-subtle {
  background: color-mix(in srgb, var(--glass-bg) 65%, transparent);
  backdrop-filter: blur(var(--glass-blur-sm)) saturate(1.4);
  -webkit-backdrop-filter: blur(var(--glass-blur-sm)) saturate(1.4);
  border: var(--glass-border);
}

/* Elevated glass — stronger effect with more shadow */
.glass-elevated {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur-lg)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur-lg)) saturate(var(--glass-saturate));
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-top: 1px solid rgba(255, 255, 255, 0.20);
  box-shadow: var(--glass-shadow-elevated);
}

/* Glass card — rounded container */
.glass-card {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur-md)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur-md)) saturate(var(--glass-saturate));
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-top: 1px solid rgba(255, 255, 255, 0.20);
  border-radius: var(--radius-xl, 1.25rem);
  box-shadow: var(--glass-shadow);
  padding: var(--space-lg, 1.125rem);
}

/* Interactive glass — hover transition */
.glass-interactive {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur-md)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur-md)) saturate(var(--glass-saturate));
  border: var(--glass-border);
  box-shadow: var(--glass-shadow);
  transition:
    background var(--transition-base, 250ms ease),
    box-shadow var(--transition-base, 250ms ease),
    transform 350ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.glass-interactive:hover {
  background: var(--glass-bg-hover);
  box-shadow: var(--glass-shadow-elevated);
  transform: translateY(-2px);
}

/* --- Forced colors: replace glass with borders --- */
@media (forced-colors: active) {
  .glass,
  .glass-subtle,
  .glass-elevated,
  .glass-card,
  .glass-interactive {
    background: Canvas;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 1px solid ButtonBorder;
    border-top: 1px solid ButtonBorder;
    box-shadow: none;
  }
}

/* --- Reduced motion: disable blur transitions and transforms --- */
@media (prefers-reduced-motion: reduce) {
  .glass-interactive {
    transition: none;
  }

  .glass-interactive:hover {
    transform: none;
  }
}
