/*
 * Padma's shared visual language, adapted from the stotram reader.
 * Keep this file after each page's inline styles so these tokens remain the
 * single cross-page authority for color, typography, and container treatment.
 */
:root {
  --md-sys-color-primary: #8d2948;
  --md-sys-color-on-primary: #fffaf5;
  --md-sys-color-primary-container: #f2d8df;
  --md-sys-color-on-primary-container: #51162d;
  --md-sys-color-secondary: #b27a22;
  --md-sys-color-on-secondary: #ffffff;
  --md-sys-color-secondary-container: #f3e2b6;
  --md-sys-color-on-secondary-container: #3e2d16;
  --md-sys-color-tertiary: #9a3d2e;
  --md-sys-color-on-tertiary: #ffffff;
  --md-sys-color-tertiary-container: #f3ddd5;
  --md-sys-color-on-tertiary-container: #4a1812;
  --md-sys-color-surface: #fbf5e8;
  --md-sys-color-surface-dim: #ecdfcc;
  --md-sys-color-surface-container-lowest: #fffdf8;
  --md-sys-color-surface-container-low: #fbf7ee;
  --md-sys-color-surface-container: #f7efe6;
  --md-sys-color-surface-container-high: #f2e7db;
  --md-sys-color-surface-container-highest: #eadbc9;
  --md-sys-color-on-surface: #392825;
  --md-sys-color-on-surface-variant: #725d56;
  --md-sys-color-outline: #a9846d;
  --md-sys-color-outline-variant: #e3cda8;
  --md-sys-color-error: #a1372c;
  --md-sys-color-error-container: #f9e3dc;
  --md-sys-color-on-error-container: #491611;
  --padma-color-lacquer: #5c2032;
  --padma-color-lacquer-light: #762b43;
  --padma-color-on-lacquer: #fff7ed;
  --padma-color-lacquer-muted: #e8cdbf;
  --padma-color-ritual-gold: #d5a64f;
  --padma-font-ui: Inter, system-ui, sans-serif;
  --padma-font-display: "Noto Serif", "Noto Serif Telugu", "Tiro Devanagari Hindi", Georgia, serif;
  --padma-font-technical: "Roboto Mono", ui-monospace, monospace;
  --padma-radius-card: 10px;
  --padma-shadow-small: 0 2px 7px rgba(72, 42, 29, .07);
  --padma-shadow-medium: 0 18px 48px rgba(72, 42, 29, .12);
}

body,
button,
input,
select,
textarea {
  font-family: var(--padma-font-ui);
}

h1,
h2,
h3,
.top-bar-title,
.padma-mobile-title,
.padma-nav-brand-title,
.festival-banner-name,
.event-card-name,
.card-value,
.tithi-name {
  font-family: var(--padma-font-display);
}

.technical,
.mono,
code,
pre {
  font-family: var(--padma-font-technical);
}

time {
  font-family: var(--padma-font-ui);
  font-variant-numeric: tabular-nums;
}

.form-section,
.festival-banner,
.stat-card,
.phases-card,
.lagna-card,
.planet-table-card,
.dasha-section,
.anniversary-card,
.event-card {
  border-color: var(--md-sys-color-outline-variant);
  border-radius: var(--padma-radius-card);
  background: var(--md-sys-color-surface-container-lowest);
  box-shadow: var(--padma-shadow-small);
}

.results-panel {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.tithi-card,
.data-card {
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--padma-radius-card);
  background: var(--md-sys-color-surface-container-lowest);
  box-shadow: var(--padma-shadow-small);
}

.padma-mobile-bar {
  background: rgba(255, 253, 248, .96);
  backdrop-filter: blur(12px);
}

.padma-global-nav {
  background: var(--md-sys-color-surface-container-lowest);
  box-shadow: var(--padma-shadow-medium);
}

.padma-nav-item.active,
.padma-nav-option.active {
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
}

:focus-visible {
  outline-color: rgba(141, 41, 72, .55);
}