/* CEREMONY: Viaoda Libre is the display voice; Literata is reading and UI.
   These locally hosted files cover both Cyrillic and Latin. Original TTFs and
   their OFL licences are retained alongside lossless, compressed WOFF copies. */
@font-face {
  font-family: "Viaoda Libre";
  src: url('/assets/fonts/ViaodaLibre-Regular.woff') format('woff'),
       url('/assets/fonts/ViaodaLibre-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "Literata";
  src: url('/assets/fonts/Literata-Variable.woff') format('woff'),
       url('/assets/fonts/Literata-Variable.ttf') format('truetype');
  font-weight: 200 900;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "Literata";
  src: url('/assets/fonts/Literata-Italic-Variable.woff') format('woff'),
       url('/assets/fonts/Literata-Italic-Variable.ttf') format('truetype');
  font-weight: 200 900;
  font-style: italic;
  font-display: block;
}

:root {
  /* Georgia is a technical fallback, never a separately assigned design font. */
  --font-display: "Viaoda Libre", Georgia, serif;
  --font-body: "Literata", Georgia, serif;

  --display-xl-size: 44px;
  --display-lg-size: 32px;
  --display-md-size: 26px;
  --heading-sm-size: 20px;
  --body-lg-size: 18px;
  --body-md-size: 17px;
  --body-sm-size: 14px;
  --body-italic-size: 20px;
  --button-size: 16px;
  --caption-size: 13px;
  --icon-size: 24px;
  --icon-lg-size: 30px;
  --card-caption-size: 12px;

  --display-xl: normal 400 var(--display-xl-size)/1.15 var(--font-display);
  --display-lg: normal 400 var(--display-lg-size)/1.2 var(--font-display);
  --display-md: normal 400 var(--display-md-size)/1.2 var(--font-display);
  --heading-sm: normal 500 var(--heading-sm-size)/1.35 var(--font-body);
  --body-lg: normal 400 var(--body-lg-size)/1.6 var(--font-body);
  --body-md: normal 400 var(--body-md-size)/1.6 var(--font-body);
  --body-sm: normal 400 var(--body-sm-size)/1.5 var(--font-body);
  --body-italic: italic 400 var(--body-italic-size)/1.6 var(--font-body);
  --button: normal 500 var(--button-size)/1.4 var(--font-body);
  --caption: normal 400 var(--caption-size)/1.45 var(--font-body);
  --caption-medium: normal 500 var(--caption-size)/1.45 var(--font-body);
  --icon: normal 400 var(--icon-size)/1 var(--font-body);
  --icon-lg: normal 400 var(--icon-lg-size)/1 var(--font-body);
  --card-caption: normal 400 var(--card-caption-size)/1.3 var(--font-body);
}

@media (max-width: 650px) {
  :root {
    --display-xl-size: 34px;
    --display-lg-size: 30px;
  }
}

html {
  font-synthesis: none;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
/* Apply to every element, including controls whose font shorthand is reset. */
*, *::before, *::after {
  font-synthesis: none;
  font-optical-sizing: auto;
  letter-spacing: normal;
}
body { font: var(--body-md); }
button, input, select, textarea { font: var(--button); }
textarea { font: var(--body-md); }
small { font: var(--caption); }
strong, b { font-family: var(--font-body); font-weight: 600; }
em, i { font-family: var(--font-body); font-style: italic; font-weight: 400; }

/* Public tokens also work as utility classes for future screens. Semantic
   selectors assign existing screens to the same roles, without local sizes. */
h1, .display-xl { font: var(--display-xl); }
h2, .display-md, .letter-title { font: var(--display-md); }
.display-lg { font: var(--display-lg); }
h3, .heading-sm { font: var(--heading-sm); }
.body-lg { font: var(--body-lg); }
.body-md { font: var(--body-md); }
.body-sm { font: var(--body-sm); }
.body-italic { font: var(--body-italic); }
.button { font: var(--button); }
.caption { font: var(--caption); }

/* Functional controls and tappable list titles use Literata throughout. */
.primary-button, .secondary-button, .text-button, .letter-enter,
.opening-start, .opening-silent, .opening-skip, .future-ritual,
.hero-anchor, .tile-action, .accessible-gesture,
.recipe-tile span, .salon-about .text-button {
  font: var(--button);
}
button :is(h1, h2, h3), .drink-title, .peek-title {
  font: var(--heading-sm);
}
.language, .language-toggle, .modal-language, .salon-link,
.bottom-nav button span {
  font: var(--caption-medium);
}
.audio-toggle, .music-volume, .theme-label, .theme-label select {
  font: var(--button);
}

/* Reading, recommendations, the ordinary letter and all modal descriptions. */
.stage-description, .hero-subtitle, .ritual-tile p, .salon-note p,
.daily-choice p, .drink-description, .intro-note,
.invitation-letter > p:not(.letter-title),
.full-invitation > p:not(.letter-title),
.today-reading > p, .reading-item p, .empty-journal p,
.about-panel > p:not(.eyebrow), .modal-content > p:not(.eyebrow),
.salon-dialog > p:not(.eyebrow), .recipe-description,
.ingredients, .recipe-steps, .salon-about {
  font: var(--body-md);
}
.enlarged-letter > p:not(.letter-title), .reflection-question {
  font: var(--body-lg);
}
.enlarged-letter .letter-title { font: var(--display-lg); }
.salon-small, .shuffle-invitation, .reveal-line { font: var(--body-lg); }
.journal-entry p { font: var(--body-md); }

/* True italic comes from the separate Literata italic variable file. */
.day-motif > .motif-line, .takeaway > p:not(.eyebrow) {
  font: var(--body-italic);
}
.day-motif > .eyebrow {
  font: var(--caption-medium);
  text-transform: none;
}

.eyebrow, .tile-eyebrow, .ritual-date, .ritual-time,
.storage-note, .reading-note, .journal-storage, .entry-note,
.demo-caption, .stage-footnote, .gesture-hint, .drink-meta,
.recipe-tile p, .journal-entry small, .future-ritual small,
.audio-note, .audio-current, .hero-caption, .peek-line, .peek-name,
.site-footer, .site-footer > span:last-child, .toast {
  font: var(--caption);
}
.modal-content > p.audio-note, .modal-content > p.audio-current,
.modal-content > p.drink-meta { font: var(--caption); }
.eyebrow, .tile-eyebrow { font-weight: 500; text-transform: none; }
.reading-essence, .future-note, .section-title > span { font: var(--body-sm); }
.storage-info { font: var(--caption); }
.storage-info summary { font: var(--caption-medium); }
.envelope-hint { font: var(--button); }

/* Icon glyphs and the old saved vector card art are separate semantic roles. */
.tiny-star, .footer-mark, .modal-close, .circle-button,
.bottom-nav button, .salon-about > span { font: var(--icon); }
.note-star { font: var(--icon-lg); }
.bottom-nav button span { font: var(--caption-medium); }
.wheel-sector text { font: var(--button); }
.legacy-card-title { font: var(--body-sm); }
.legacy-card-number, .legacy-card-title--long { font: var(--card-caption); }

/* Never request a bold or italic face that Viaoda Libre does not supply. */
:is(h1, h2, .letter-title, .display-xl, .display-lg, .display-md) :is(b, strong) {
  font-family: inherit;
  font-weight: 400;
}