/**
 * Shared component styles and CSS custom properties for WebKit Performance Dashboard
 *
 * CSS custom properties (CSS variables) can penetrate Shadow DOM boundaries,
 * allowing consistent styling across web components.
 */

:root {
  /* Card gradients */
  --gradient-card-start: #ffffff;
  --gradient-card-mid: #f5f5f5;
  --gradient-card-end: #e9e9e9;

  /* Borders and shadows */
  --border-color: #ccc;
  --border-radius-standard: 10px;
  --box-shadow-subtle: 0 1px 3px rgba(0, 0, 0, 0.08);

  /* Standard gradient backgrounds */
  --gradient-standard: linear-gradient(to bottom, var(--gradient-card-start), var(--gradient-card-end));
  --gradient-info-card: linear-gradient(to bottom, var(--gradient-card-start) 0%, var(--gradient-card-mid) 50%, var(--gradient-card-end) 100%);
}

/* Utility class for gradient cards (for non-shadow-DOM elements) */
.gradient-card {
  background: var(--gradient-standard);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-standard);
  box-shadow: var(--box-shadow-subtle);
}