/* ============================================================
   Component Tokens — scoped custom properties for web components.
   Extends design system tokens from variables.css.
   ============================================================ */

:root {
  /* Hero */
  --hero-padding-block: var(--space-4xl);
  --hero-bg: var(--color-nav);
  --hero-text: #fff;
  --hero-overlay-opacity: 0.35;

  /* Stat Grid */
  --stat-card-bg: var(--color-bg);
  --stat-card-border: var(--color-border);
  --stat-value-size: var(--font-size-2xl);
  --stat-label-size: var(--font-size-sm);

  /* Breadcrumb */
  --breadcrumb-gap: var(--space-sm);
  --breadcrumb-color: var(--color-muted);

  /* Content Section */
  --section-heading-size: var(--font-size-xl);
  --section-border: var(--color-border);

  /* Review Card */
  --review-bg: var(--color-bg-alt);
  --review-radius: var(--radius-md);
  --review-star-color: var(--color-warning);

  /* Contact Card */
  --contact-card-bg: var(--color-bg);
  --contact-card-radius: var(--radius-lg);
}