/* 
 * stylesheet for scarlett
 * Requested: style.css
 * Build: b820f8
 * Notes: This file contains scoped rules and variables intended for progressive enhancement.
 */

/* Variables (scoped so they never leak globally) */
style.css-b820f8 {
  --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 */
style.css-b820f8 .c-card--b820f8 {
  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 */
style.css-b820f8 .c-title--b820f8 {
  margin: 0 0 0.5rem 0;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: .01em;
  color: var(--pf-color-primary);
}

/* Muted text */
style.css-b820f8 .c-meta--b820f8 {
  font-size: .875rem;
  color: var(--pf-color-muted);
}

/* Button */
style.css-b820f8 .c-btn--b820f8 {
  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;
}
style.css-b820f8 .c-btn--b820f8:hover { transform: translateY(-1px); }
style.css-b820f8 .c-btn--b820f8:active { transform: translateY(0); }

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

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

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