/* =============================================================================
   theme.css - single source for the look of all ometer apps
   =============================================================================
   Layer 1: tokens (variables) - fonts, sizes, colours. Change values here only.
   Layer 2: text styles (classes) - added step by step, use the tokens.
   Loaded before styles.css. See docs/DESIGN.md.
   ============================================================================= */

/* ── Font: Lato, same as myurbanclimate. Self-hosted because the CSP only
   allows fonts from our own server (font-src 'self'). Licence: fonts/OFL.txt */
@font-face {
  font-family: "Lato";
  src: url("../fonts/lato-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lato";
  src: url("../fonts/lato-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lato";
  src: url("../fonts/lato-900.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* ── Layer 1: tokens ────────────────────────────────────────────────────── */
:root {
  --om-font: "Lato", "Helvetica Neue", Arial, sans-serif;

  /* Font sizes. Absolute sizes (px) only through these variables.
     Reference: table text in "Messwerte aktuell" (station box). */
  --fs-table:       85%;   /* table text (~12.75px), the reference */
  --fs-note:        12px;  /* legends, footnotes, timestamps */
  --fs-sub:         15px;  /* subheaders, status lines (.table-sub) */
  --fs-card-body:   14px;  /* body text in cards (imprint, docs) */
  --fs-cardtitle:   16px;  /* titles of cards and boxes */
  --fs-statement:   18px;  /* statement values in the overview */
  --fs-num:         27px;  /* large key figures L1-L4 */
  --fs-hero:        54px;  /* current temperature at your location (overview) */
  --fs-wordmark:    34px;  /* city name in the header (Lato 900) */
  --fs-tagline:     16px;  /* subtitle under the city name in the header */
  --fs-icon:        16px;  /* icon in the overview boxes */
  --fs-pop-sm:      13px;  /* secondary lines in the hover popup */
  --fs-pop-md:      15px;  /* secondary lines in the large popup */
  --fs-pop:         19px;  /* value in the hover popup */
  --fs-pop-big:     34px;  /* value in the large click popup */
  --fs-wordmark-sm: 24px;  /* city name in the header on small screens */
  --fs-button:      16px;  /* forward/back buttons (.styled-button) */
  --fs-nav-label:   12px;  /* labels under the icons in the bottom navigation */
  --fs-icon-lg:     26px;  /* large icons: feedback smileys, icon in the large popup */
}

/* ── Layer 1: colours ─────────────────────────────────────────────────────
   Base colours. The only place with colour values. Brand colours come from
   the city logos. See docs/DESIGN_CONCEPT.md. */
:root {
  --om-nacht:       #0B1A30;
  --om-himmel-1:    #5C93E5;
  --om-himmel-2:    #5383CD;
  --om-himmel-3:    #4572B3;
  --om-himmel-4:    #3C639C;
  --om-himmel-5:    #325180;
  --om-quecksilber: #B30F10;
  --om-glas:        #F2F2F2;
  --om-weiss:       #FFFFFF;
  --om-tinte:       #0F1B2D;
  --om-grau:        #546174;
  --om-linie:       #CDD5E0;
  --om-blau:        #2F5DA8;
  --om-bernstein:   #E8A33A;
}

/* Colour roles. Components use these, never the base colours. */
:root {
  --om-page-bg:         var(--om-nacht);
  --om-page-text:       var(--om-glas);
  --om-page-text-muted: var(--om-himmel-1);
  --om-page-text-soft:  color-mix(in srgb, var(--om-himmel-1) 65%, var(--om-glas));
  --om-page-rule:       var(--om-himmel-5);

  --om-surface:      var(--om-glas);
  --om-card-bg:      var(--om-glas);
  --om-card-head-bg: var(--om-glas);
  --om-subtle-bg:    color-mix(in srgb, var(--om-tinte) 5%, var(--om-glas));
  --om-input-bg:     var(--om-weiss);

  --om-text:       var(--om-tinte);
  --om-text-muted: var(--om-grau);
  --om-border:     var(--om-linie);
  --om-link:       var(--om-blau);

  --om-level-ok:     var(--om-grau);
  --om-level-good:   var(--om-grau);
  --om-level-mild:   var(--om-bernstein);
  --om-level-warm:   var(--om-bernstein);
  --om-level-danger: var(--om-quecksilber);

  --om-tooltip-bg:         var(--om-nacht);
  --om-text-on-dark:       var(--om-glas);
  --om-text-muted-on-dark: var(--om-himmel-1);

  --om-notice-bg:     var(--om-glas);
  --om-notice-border: var(--om-linie);
  --om-notice-text:   var(--om-tinte);

  --om-brand:       var(--om-quecksilber);
  --om-brand-hover: var(--om-quecksilber);

  --om-ink-faint:         color-mix(in srgb, var(--om-tinte) 7%, transparent);
  --om-ink-soft:          color-mix(in srgb, var(--om-tinte) 30%, transparent);
  --om-level-good-tint:   color-mix(in srgb, var(--om-grau) 13%, transparent);
  --om-level-mild-tint:   color-mix(in srgb, var(--om-bernstein) 18%, transparent);
  --om-level-warm-tint:   color-mix(in srgb, var(--om-bernstein) 18%, transparent);
  --om-level-danger-tint: color-mix(in srgb, var(--om-quecksilber) 13%, transparent);

  --om-radius-card:   12px;
  --om-radius-btn:    8px;
  --om-radius-dialog: 16px;
}

/* ── Layer 2: text styles ──────────────────────────────────────────────────
   Lato weights: 400 (normal), 700 (bold) and 900 (only for the large
   temperature, key figures and the wordmark). */

/* Card title: the header line of every box, card and dialog. */
.box .box-header .box-title,
.muc-card > .muc-card-header,
.modal-header .modal-title {
  font-size: var(--fs-cardtitle);
  font-weight: 700;
}

/* Wordmark and tagline in the header ("Bernometer" / subtitle). */
.om-wordmark {
  font-size: var(--fs-wordmark);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.om-tagline {
  font-size: var(--fs-tagline);
  font-weight: 400;
}
@media (max-width: 620px) {
  .om-wordmark { font-size: var(--fs-wordmark-sm); }
  .om-tagline  { font-size: var(--fs-card-body); }
}

/* Subheading: a heading inside a card, and the collapsible
   sections in the imprint. */
.tab-pane:not(.overview-tab) .box > .box-body h3,
.tab-pane:not(.overview-tab) .box > .box-body h5,
.muc-card .muc-card-body h5,
.imp-acc-body h5,
.imp-acc-header {
  font-size: var(--fs-sub);
  font-weight: 700;
}

/* Page background: header and the area behind the cards.
   Switch via --om-page-bg. */
body, .wrapper, .content-wrapper {
  background-color: var(--om-page-bg) !important;
}

/* Text colour follows the surface: light on the dark page background,
   dark inside every light surface (cards, tiles). */
.content-wrapper {
  color: var(--om-page-text);
}
.box,
.small-box,
.muc-card,
.imp-legal-card,
.aufbau-banner {
  color: var(--om-text);
}


/* ── Interaction: blue ────────────────────────────────────────────────────
   Only for links, buttons and active switches, never for data. Data uses
   the warning level colours only, so blue cannot be mistaken for a
   warning. */

/* Links in text: blue, underlined. */
.box-body p a,
.box-body li a,
.doc-bullet a,
.muc-card-body a,
.imp-acc-body a,
.modal-body p a {
  color: var(--om-link);
  text-decoration: underline;
}
.box-body p a:hover,
.box-body li a:hover,
.doc-bullet a:hover,
.muc-card-body a:hover,
.imp-acc-body a:hover,
.modal-body p a:hover {
  color: var(--om-text);
}