/* 
 * stylesheet for {$pluginSlug}
 * Requested: {$reqPath}
 * Build: {$ns}
 * Notes: This file contains scoped rules and variables intended for progressive enhancement.
 */

/* Variables (scoped so they never leak globally) */
{$scope} {
  --pf-color-primary: #3b82f6;
  --pf-color-muted: #6b7280;
  --pf-radius: 8px;
  --pf-gap: 12px;
  --pf-font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
}

/* Component shell */
{$scope} .c-card--{$ns} {
  display: block;
  box-sizing: border-box;
  padding: var(--pf-gap);
  border-radius: var(--pf-radius);
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.1);
  font-family: var(--pf-font);
}

/* "Widget" title */
{$scope} .c-title--{$ns} {
  margin: 0 0 0.5rem 0;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: .01em;
  color: var(--pf-color-primary);
}

/* Muted text */
{$scope} .c-meta--{$ns} {
  font-size: .875rem;
  color: var(--pf-color-muted);
}

/* Button */
{$scope} .c-btn--{$ns} {
  appearance: none;
  border: 0;
  border-radius: calc(var(--pf-radius) - 2px);
  padding: .5rem .875rem;
  font-weight: 600;
  background: var(--pf-color-primary);
  color: #fff;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
}
{$scope} .c-btn--{$ns}:hover { transform: translateY(-1px); }
{$scope} .c-btn--{$ns}:active { transform: translateY(0); }

/* animation Keyframes  */
@keyframes pf-pulse-{$ns} {
  0% { transform: scale(1); opacity: .95; }
  50% { transform: scale(1.02); opacity: 1; }
  100% { transform: scale(1); opacity: .95; }
}
{$scope} .is-pulsing--{$ns} { animation: pf-pulse-{$ns} 2.4s ease-in-out infinite; }

/* Media query for responsiveness */
@media (max-width: 640px) {
  {$scope} .c-card--{$ns} { padding: calc(var(--pf-gap) * .75); }
}

/* Prefers-color-scheme */
@media (prefers-color-scheme: dark) {
  {$scope} .c-card--{$ns} { background: #0b0f19; box-shadow: 0 1px 3px rgba(0,0,0,.6); }
  {$scope} .c-title--{$ns} { color: #60a5fa; }
  {$scope} .c-meta--{$ns} { color: #9ca3af; }
}