/* ==========================================================================
   Prayer Times — shared design tokens
   Single source of truth for theming + the base widget shell.
   Every widget stylesheet (style / banner / signage) depends on this file,
   so the palette is always available even when a widget is used on its own.

   Palette: neutral slate, dark-first.
   ========================================================================== */

:root {
  color-scheme: light;

  /* Surfaces */
  --pt-page: #eef1f5;
  --pt-surface: #ffffff;
  --pt-surface-raised: #ffffff;

  /* Hero — a subtle background shift instead of a boxed border */
  --pt-hero: rgba(15, 23, 42, 0.04);
  --pt-hero-ring: rgba(15, 23, 42, 0.05);

  /* Text */
  --pt-text: #0f172a;
  --pt-muted: #475569;
  --pt-faint: #8a97a8;

  /* Lines */
  --pt-border: rgba(15, 23, 42, 0.08);
  --pt-border-strong: rgba(15, 23, 42, 0.14);

  /* Accent (active prayer) */
  --pt-accent: #4f46e5;
  --pt-accent-ink: #4338ca;
  --pt-accent-soft: rgba(79, 70, 229, 0.10);
  --pt-accent-line: rgba(79, 70, 229, 0.22);

  /* Elevation + shape */
  --pt-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 20px 46px -16px rgba(15, 23, 42, 0.20);
  --pt-radius: 22px;
  --pt-radius-sm: 16px;
  --pt-radius-xs: 11px;

  /* Type */
  --pt-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, system-ui, "Helvetica Neue", Arial, sans-serif;
  --pt-font-num: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
}

/* Dark theme — explicit class hook */
.dark {
  color-scheme: dark;

  --pt-page: #090d14;
  --pt-surface: #10151f;
  --pt-surface-raised: #1a2130;

  --pt-hero: rgba(255, 255, 255, 0.05);
  --pt-hero-ring: rgba(255, 255, 255, 0.06);

  --pt-text: #f2f5f9;
  --pt-muted: #aab4c2;
  --pt-faint: #6b7888;

  --pt-border: rgba(255, 255, 255, 0.08);
  --pt-border-strong: rgba(255, 255, 255, 0.16);

  --pt-accent: #818cf8;
  --pt-accent-ink: #c7d2fe;
  --pt-accent-soft: rgba(129, 140, 248, 0.14);
  --pt-accent-line: rgba(129, 140, 248, 0.28);

  --pt-shadow: 0 1px 2px rgba(0, 0, 0, 0.30), 0 26px 52px -18px rgba(0, 0, 0, 0.62);
}

/* Dark theme — system preference (when no explicit class is set) */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    --pt-page: #090d14;
    --pt-surface: #10151f;
    --pt-surface-raised: #1a2130;

    --pt-hero: rgba(255, 255, 255, 0.05);
    --pt-hero-ring: rgba(255, 255, 255, 0.06);

    --pt-text: #f2f5f9;
    --pt-muted: #aab4c2;
    --pt-faint: #6b7888;

    --pt-border: rgba(255, 255, 255, 0.08);
    --pt-border-strong: rgba(255, 255, 255, 0.16);

    --pt-accent: #818cf8;
    --pt-accent-ink: #c7d2fe;
    --pt-accent-soft: rgba(129, 140, 248, 0.14);
    --pt-accent-line: rgba(129, 140, 248, 0.28);

    --pt-shadow: 0 1px 2px rgba(0, 0, 0, 0.30), 0 26px 52px -18px rgba(0, 0, 0, 0.62);
  }
}

/* --------------------------------------------------------------------------
   Base widget shell — shared by all three layouts
   -------------------------------------------------------------------------- */
.ptcsv-widget {
  background: var(--pt-surface);
  color: var(--pt-text);
  border: 1px solid var(--pt-border);
  border-radius: var(--pt-radius);
  box-shadow: var(--pt-shadow);
  font-family: var(--pt-font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
}

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

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