:root {
  --font-caption: 12px;
  --font-body: 14px;
  --font-title: 20px;
  --font-page: 30px;
  --font-data: 36px;
  --font-display: 48px;
  --text-heading: #eeeeee;
  --text-body: #b3b3b3;
  --text-muted: #999999;
  --text-faint: #666666;
  --text-accent: #a78bfa;
}

.fookus-ui {
  color: var(--text-body);
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: var(--font-body);
  font-weight: 400;
  line-height: 1.43;
}

.fookus-ui .text-\[10px\],
.fookus-ui .text-\[11px\],
.fookus-ui .text-xs {
  font-size: var(--font-caption) !important;
  line-height: 1.33 !important;
}

.fookus-ui .text-sm,
.fookus-ui .text-base {
  font-size: var(--font-body) !important;
  line-height: 1.43 !important;
}

.fookus-ui .text-lg,
.fookus-ui .text-xl {
  font-size: var(--font-title) !important;
  line-height: 1.2 !important;
}

.fookus-ui .text-2xl,
.fookus-ui .text-3xl {
  font-size: var(--font-page) !important;
  line-height: 1.1 !important;
}

.fookus-ui .text-4xl {
  font-size: var(--font-data) !important;
  line-height: 1 !important;
}

.fookus-ui .text-5xl {
  font-size: var(--font-display) !important;
  line-height: 1 !important;
}

@media (min-width: 640px) {
  .fookus-ui .sm\:text-5xl {
    font-size: var(--font-display) !important;
    line-height: 1 !important;
  }
}

.fookus-ui .font-medium { font-weight: 400 !important; }
.fookus-ui .font-semibold { font-weight: 600 !important; }

.fookus-ui h1,
.fookus-ui h2,
.fookus-ui h3 {
  color: var(--text-heading);
  font-weight: 600;
  letter-spacing: -.015em;
}

.fookus-ui button,
.fookus-ui input,
.fookus-ui select,
.fookus-ui textarea { font: inherit; }

.fookus-ui .text-white,
.fookus-ui .text-zinc-100,
.fookus-ui .text-zinc-200,
.fookus-ui [class~="text-white/80"] { color: var(--text-heading) !important; }

.fookus-ui .text-zinc-300,
.fookus-ui .text-zinc-400,
.fookus-ui [class~="text-white/70"],
.fookus-ui [class~="text-white/75"] { color: var(--text-body) !important; }

.fookus-ui .text-zinc-500,
.fookus-ui [class~="text-white/60"] { color: var(--text-muted) !important; }

.fookus-ui .text-zinc-600 { color: var(--text-faint) !important; }

.fookus-ui .text-violet-200,
.fookus-ui .text-violet-300,
.fookus-ui .text-emerald-300,
.fookus-ui .text-emerald-400 { color: var(--text-accent) !important; }

.fookus-ui .uppercase { text-transform: none !important; }
.fookus-ui .tracking-wide { letter-spacing: normal !important; }

.fookus-ui .action-button {
  font-size: var(--font-body) !important;
  font-weight: 400 !important;
}

.fookus-ui .calendar-weekday,
.fookus-ui .calendar-day-number,
.fookus-ui .calendar-holiday,
.fookus-ui .forecast-calendar-date,
.fookus-ui .forecast-temp-label {
  font-size: var(--font-caption) !important;
  font-weight: 400 !important;
}

.fookus-ui .forecast-weekday,
.fookus-ui .forecast-temp-value { font-size: var(--font-body) !important; }
.fookus-ui .forecast-weekday { font-weight: 400 !important; }
.fookus-ui .forecast-temp-value {
  color: var(--text-heading) !important;
  font-weight: 600 !important;
}
.fookus-ui .forecast-temp-value.is-night {
  color: var(--text-faint) !important;
  font-weight: 400 !important;
}
.fookus-ui .calendar-weekday { color: var(--text-muted) !important; }
.fookus-ui .calendar-cell.is-muted { color: var(--text-faint) !important; }
.fookus-ui .calendar-holiday { color: var(--text-accent) !important; }

.fookus-ui .text-red-300,
.fookus-ui .layout-mobile-control.is-hide,
.fookus-ui .detail-day.weekend .forecast-weekday,
.fookus-ui .weather-forecast-grid .weekend .forecast-weekday {
  color: #fda4af !important;
}

.fookus-ui .scale-choice .text-lg,
.fookus-ui .scale-choice .text-base,
.fookus-ui .scale-choice .text-sm {
  font-size: var(--font-body) !important;
  line-height: 1.43 !important;
}

/* Mobile font preferences change typography only. */
.mobile-font-settings { display: none; }
.mobile-font-options { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.mobile-font-options .scale-choice { padding: 8px 12px; }
@media (max-width: 639px) {
  html:not(.fookus-tv) .mobile-font-settings { display: block; }
  html:not(.fookus-tv)[data-mobile-font="big"] { --font-caption: 14px; --font-body: 16px; --font-title: 22px; --font-page: 32px; --font-data: 40px; --font-display: 52px; }
  html:not(.fookus-tv)[data-mobile-font="large"] { --font-caption: 16px; --font-body: 18px; --font-title: 24px; --font-page: 34px; --font-data: 44px; --font-display: 56px; }
  /* Text in action controls stays at its original size in every mode. */
  html:not(.fookus-tv) .fookus-ui :is(button, input, select, textarea, a, [role="button"]):not(.task-text-button):not(.detail-day):not(.calendar-cell):not(.news-item) {
    --font-caption: 12px; --font-body: 14px; --font-title: 20px;
    --font-page: 30px; --font-data: 36px; --font-display: 48px;
    font-size: var(--font-body);
  }
  html:not(.fookus-tv):is([data-mobile-font="big"], [data-mobile-font="large"]) .fookus-ui .weather-overview-copy,
  html:not(.fookus-tv):is([data-mobile-font="big"], [data-mobile-font="large"]) .fookus-ui .calendar-day-task,
  html:not(.fookus-tv):is([data-mobile-font="big"], [data-mobile-font="large"]) .fookus-ui .task-text-button { font-size: var(--font-body); }
  html:not(.fookus-tv):is([data-mobile-font="big"], [data-mobile-font="large"]) .fookus-ui .weather-fact,
  html:not(.fookus-tv):is([data-mobile-font="big"], [data-mobile-font="large"]) .fookus-ui .calendar-task-count,
  html:not(.fookus-tv):is([data-mobile-font="big"], [data-mobile-font="large"]) .fookus-ui .calendar-holiday-panel,
  html:not(.fookus-tv):is([data-mobile-font="big"], [data-mobile-font="large"]) .fookus-ui .weather-hourly-slot time,
  html:not(.fookus-tv):is([data-mobile-font="big"], [data-mobile-font="large"]) .fookus-ui .weather-hourly-slot span { font-size: var(--font-caption) !important; }
}