/* ==========================================================================
   Salafi Prayer Times — the design tokens (the only token file)
   Warm neutrals and hairlines from the Salafi Centre design language.
   Charcoal-only by default: the next prayer is marked by weight and a
   neutral well, never by hue. Colour appears only when an instance sets
   accent="#…" on the shortcode (or a wrapper class overrides --spt-accent).

   Scoped to .spt — never :root — so nothing leaks into the host page.
   Dark mode is opt-in per instance (theme="dark"), never the visitor's
   system preference.
   ========================================================================== */

.spt {
  /* Text */
  --spt-text: #1f1e1c;               /* ~15:1 on white */
  --spt-muted: #5b5955;              /* ~6.6:1 — captions, labels */
  --spt-faint: #8b8880;              /* decorative / large only */

  /* Surfaces */
  --spt-card: #ffffff;               /* the card face of day/banner/display */
  --spt-well: #f4f3f0;               /* chips, icon tiles, tinted wells */
  --spt-line: #e6e4df;               /* hairlines */
  --spt-line-strong: rgba(31, 30, 28, 0.16);

  /* Accent — charcoal unless an instance says otherwise */
  --spt-accent: var(--spt-text);
  --spt-accent-well: var(--spt-well);
  --spt-accent-line: var(--spt-line-strong);

  /* Elevation — soft matte, no glows */
  --spt-shadow: 0 1px 2px rgba(31, 30, 28, 0.05), 0 12px 32px -12px rgba(31, 30, 28, 0.14);

  /* Shape */
  --spt-r-xs: 8px;
  --spt-r-sm: 12px;
  --spt-r: 16px;
  --spt-r-pill: 999px;

  /* Type — the theme already serves Manrope */
  --spt-font: Manrope, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;

  color: var(--spt-text);
  font-family: var(--spt-font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
}

.spt,
.spt *,
.spt *::before,
.spt *::after {
  box-sizing: border-box;
}

/* Dark — for dark sections, photographic heroes and a dimmed masjid TV.
   The well doubles as a contrast scrim, so legibility never depends on
   what is behind the widget. */
.spt[data-theme="dark"],
.dark .spt {
  color-scheme: dark;

  --spt-text: #f2f1ee;
  --spt-muted: #c9c6bf;
  --spt-faint: #8b8880;
  --spt-card: #1b1a19;
  --spt-well: rgba(255, 255, 255, 0.07);
  --spt-line: rgba(255, 255, 255, 0.12);
  --spt-line-strong: rgba(255, 255, 255, 0.22);
  --spt-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 16px 40px -14px rgba(0, 0, 0, 0.55);
}

/* --------------------------------------------------------------------------
   The shared card shell (day / banner / display)
   -------------------------------------------------------------------------- */
.spt-day,
.spt-banner,
.spt-display {
  background: var(--spt-card);
  border: 1px solid var(--spt-line);
  border-radius: var(--spt-r);
  box-shadow: var(--spt-shadow);
}

/* frame="none": the chrome disappears, the content sits on the page */
.spt.is-frameless {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* Small uppercase caption used for section + column labels everywhere */
.spt-eyebrow {
  color: var(--spt-muted);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  line-height: 1;
  text-transform: uppercase;
}

/* Every clock value: tabular digits that never jiggle */
.spt time,
.spt [data-spt-slot],
.spt [data-spt-next-time] {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* The Hijri date, appended beside the Gregorian when show_date="yes" */
.spt-hijri {
  color: var(--spt-muted);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  white-space: nowrap;
}

/* Quiet per-view empty state */
.spt-empty {
  color: #5b5955;
  font-size: 0.9rem;
}

/* Anything interactive shows its focus */
.spt :focus-visible,
.spt a:focus-visible {
  outline: 2px solid var(--spt-accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .spt,
  .spt * {
    transition: none !important;
  }
}