/* Masjid Systems tokens. Generated from tokens.json. Do not edit by hand. */
@import url("https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500&family=Instrument+Serif&display=swap");

:root, [data-theme="light"] {
  color-scheme: light;
  --surface-000: #f3f3f0;
  --surface-100: #ffffff;
  --surface-200: #ebebe7;
  --line: #e1e0db;
  --line-strong: #8f8d86;
  --ink: #1b1b19;
  --ink-muted: #64625c;
  --action: var(--ink);
  --on-action: #ffffff;
  --accent: #7f2e27;
  --accent-soft: #f5e6e2;
  --on-accent: #ffffff;
  --status-live: #16794f;
  --status-live-soft: #e5f3ec;
  --status-warning: #9a5b00;
  --status-warning-soft: #fbf0dc;
  --status-danger: #c0362c;
  --status-danger-soft: #fbe7e4;
  --status-info: #2b62b8;
  --status-info-soft: #e6eefa;
  --status-idle: var(--ink-muted);
  --focus: #23707c;
  --glass-fill: #ffffffe6;
  --glass-line: #ffffffcc;
  --scene-night-top: #0b0f1c;
  --scene-night-horizon: #1f2537;
  --scene-fajr-top: #24304d;
  --scene-fajr-horizon: #c7a493;
  --scene-day-top: #9dbfd8;
  --scene-day-horizon: #f4f1ea;
  --scene-asr-top: #a9bccb;
  --scene-asr-horizon: #f1d2a3;
  --scene-maghrib-top: #3e4a66;
  --scene-maghrib-horizon: #e8906a;
  --scene-sun: #fff1d6;
  --shadow-sm: 0 0 0 1px rgba(27,27,25,0.07), 0 1px 2px rgba(27,27,25,0.05);
  --shadow-md: 0 0 0 1px rgba(27,27,25,0.08), 0 2px 4px rgba(27,27,25,0.04), 0 12px 32px -12px rgba(27,27,25,0.18);
  --shadow-lg: 0 2px 4px rgba(27,27,25,0.04), 0 32px 80px -24px rgba(27,27,25,0.35);
}
[data-theme="dark"] {
  color-scheme: dark;
  --surface-000: #0f0f0e;
  --surface-100: #191918;
  --surface-200: #232322;
  --line: #2b2b29;
  --line-strong: #6a6863;
  --ink: #f1f0ec;
  --ink-muted: #a3a19a;
  --action: var(--ink);
  --on-action: #0f0f0e;
  --accent: #e8907f;
  --accent-soft: #2c1814;
  --on-accent: #1b1b19;
  --status-live: #4cc38a;
  --status-live-soft: #13281f;
  --status-warning: #e5a43b;
  --status-warning-soft: #2b2212;
  --status-danger: #ff7a6b;
  --status-danger-soft: #2e1715;
  --status-info: #7fb0ff;
  --status-info-soft: #15213a;
  --status-idle: var(--ink-muted);
  --focus: #6fc6d1;
  --glass-fill: #181816e0;
  --glass-line: #ffffff29;
  --scene-night-top: #0b0f1c;
  --scene-night-horizon: #1f2537;
  --scene-fajr-top: #24304d;
  --scene-fajr-horizon: #c7a493;
  --scene-day-top: #9dbfd8;
  --scene-day-horizon: #f4f1ea;
  --scene-asr-top: #a9bccb;
  --scene-asr-horizon: #f1d2a3;
  --scene-maghrib-top: #3e4a66;
  --scene-maghrib-horizon: #e8906a;
  --scene-sun: #fff1d6;
  --shadow-sm: 0 0 0 1px rgba(255,255,255,0.07), 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 0 0 1px rgba(255,255,255,0.09), 0 2px 4px rgba(0,0,0,0.5), 0 12px 32px -12px rgba(0,0,0,0.7);
  --shadow-lg: 0 2px 4px rgba(0,0,0,0.5), 0 32px 80px -24px rgba(0,0,0,0.8);
}
/* No data-theme on <html> means: follow the operating system. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
  --surface-000: #0f0f0e;
  --surface-100: #191918;
  --surface-200: #232322;
  --line: #2b2b29;
  --line-strong: #6a6863;
  --ink: #f1f0ec;
  --ink-muted: #a3a19a;
  --action: var(--ink);
  --on-action: #0f0f0e;
  --accent: #e8907f;
  --accent-soft: #2c1814;
  --on-accent: #1b1b19;
  --status-live: #4cc38a;
  --status-live-soft: #13281f;
  --status-warning: #e5a43b;
  --status-warning-soft: #2b2212;
  --status-danger: #ff7a6b;
  --status-danger-soft: #2e1715;
  --status-info: #7fb0ff;
  --status-info-soft: #15213a;
  --status-idle: var(--ink-muted);
  --focus: #6fc6d1;
  --glass-fill: #181816e0;
  --glass-line: #ffffff29;
  --scene-night-top: #0b0f1c;
  --scene-night-horizon: #1f2537;
  --scene-fajr-top: #24304d;
  --scene-fajr-horizon: #c7a493;
  --scene-day-top: #9dbfd8;
  --scene-day-horizon: #f4f1ea;
  --scene-asr-top: #a9bccb;
  --scene-asr-horizon: #f1d2a3;
  --scene-maghrib-top: #3e4a66;
  --scene-maghrib-horizon: #e8906a;
  --scene-sun: #fff1d6;
  --shadow-sm: 0 0 0 1px rgba(255,255,255,0.07), 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 0 0 1px rgba(255,255,255,0.09), 0 2px 4px rgba(0,0,0,0.5), 0 12px 32px -12px rgba(0,0,0,0.7);
  --shadow-lg: 0 2px 4px rgba(0,0,0,0.5), 0 32px 80px -24px rgba(0,0,0,0.8);
  }
}
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 80px;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --duration-press: 160ms;
  --duration-quick: 180ms;
  --duration-base: 260ms;
  --duration-exit: 160ms;
  --duration-stagger: 50ms;
  --duration-slow: 600ms;
  --duration-ambient: 14s;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-meter: linear;
  --font-display: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --font-sans: "Geist", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

/* Type styles. Use these classes, or the values in tokens.json; never invent a size. */
.ms-t-display-xl { font-family: var(--font-display); font-size: 72px; line-height: 72px; font-weight: 400; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.ms-t-display { font-family: var(--font-display); font-size: 44px; line-height: 48px; font-weight: 400; letter-spacing: -0.015em; font-variant-numeric: tabular-nums; }
.ms-t-display-sm { font-family: var(--font-display); font-size: 28px; line-height: 32px; font-weight: 400; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.ms-t-title { font-family: var(--font-sans); font-size: 20px; line-height: 28px; font-weight: 600; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.ms-t-heading { font-family: var(--font-sans); font-size: 15px; line-height: 22px; font-weight: 600; letter-spacing: -0.005em; font-variant-numeric: tabular-nums; }
.ms-t-body { font-family: var(--font-sans); font-size: 15px; line-height: 22px; font-weight: 400; font-variant-numeric: tabular-nums; }
.ms-t-label { font-family: var(--font-sans); font-size: 13px; line-height: 18px; font-weight: 500; font-variant-numeric: tabular-nums; }
.ms-t-caption { font-family: var(--font-sans); font-size: 12px; line-height: 16px; font-weight: 400; font-variant-numeric: tabular-nums; }
.ms-t-figure { font-family: var(--font-sans); font-size: 22px; line-height: 28px; font-weight: 500; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.ms-t-readout { font-family: var(--font-mono); font-size: 13px; line-height: 18px; font-weight: 400; }

/* Browser surfaces */
html { background: var(--surface-000); color: var(--ink); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; }
::selection { background: var(--accent-soft); color: var(--ink); }
* { scrollbar-color: var(--line-strong) transparent; scrollbar-width: thin; -webkit-tap-highlight-color: transparent; }