/* =============================================================================
   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;
}

/* ── 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-subtitle:    22px;  /* subtitle in the page header */
  --fs-num:         27px;  /* large key figures L1-L4 */
  --fs-hero:        54px;  /* current temperature at your location (overview) */
  --fs-title:       55px;  /* page title 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-title-sm:    32px;  /* page title on small screens */
  --fs-subtitle-sm: 18px;  /* subtitle on small screens */
  --fs-button:      16px;  /* forward/back buttons (.styled-button) */
  --fs-nav-label:   8px;   /* 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, values taken from myurbanclimate (theme.R, light surfaces).
   Change colours here only. */
:root {
  /* Neutrals */
  --om-ink:         #1E1D1A;  /* main text */
  --om-ink-muted:   #6E6A62;  /* secondary text, icons */
  --om-line:        #E6E2DC;  /* borders, dividers */
  --om-surface:     #FFFFFF;  /* cards, dialogs */
  --om-surface-2:   #F3F1EC;  /* table and card headers */
  --om-surface-3:   #F7F5F0;  /* subtle surface, hover */
  --om-no-data:     #BDBDBD;  /* "no data" on maps and charts */
  --om-page-dark:   #23262B;  /* myurbanclimate page background (anthracite) */
  --om-page-light:  #ECF0F5;  /* previous light page background */
  --om-ink-on-dark:       #F4F2EE;  /* text on the dark page background */
  --om-ink-muted-on-dark: #A9A5A0;  /* secondary text on the dark background */

  /* Accent: myurbanclimate orange */
  --om-accent:      #F5842A;  /* accent lines, highlights */
  --om-accent-dark: #9A4A0F;  /* text in accent colour, readable on white */
  --om-accent-tint: #FDF1E6;  /* light orange surface */
  --om-accent-line: #F7CBA5;  /* border on light orange surfaces */

  /* University of Bern */
  --om-unibe-red:      #E4023C;  /* top line, language button */
  --om-unibe-red-dark: #C4022F;  /* hover */
  /* Signals: warning levels */
  --om-sig-green:   #27AE60;
  --om-sig-yellow:  #F39C12;
  --om-sig-orange:  #E67E22;
  --om-sig-red:     #C0392B;
}

/* Colour roles: what a colour is used for. Only point to the base colours
   above, never to hex values. */
:root {
  --om-text:         var(--om-ink);
  --om-text-muted:   var(--om-ink-muted);
  --om-border:       var(--om-line);
  --om-card-bg:      var(--om-surface);
  --om-card-head-bg: var(--om-surface-2);
  --om-link:         var(--om-accent-dark);
  /* Page background switch: change BOTH lines together.
     Dark:  --om-page-dark  + --om-text-on-dark
     Light: --om-page-light + --om-text */
  --om-page-bg:      var(--om-page-light);
  --om-page-text:    var(--om-text);

  --om-subtle-bg:       var(--om-surface-3);
  --om-tooltip-bg:      var(--om-page-dark);
  --om-notice-bg:       var(--om-accent-tint);   /* notice banners */
  --om-notice-border:   var(--om-accent-line);
  --om-notice-text:     var(--om-accent-dark);
  --om-brand:           var(--om-unibe-red);
  --om-brand-hover:     var(--om-unibe-red-dark);

  /* Tints: derived automatically from the colours above */
  --om-ink-faint:         color-mix(in srgb, var(--om-ink) 7%, transparent);
  --om-ink-soft:          color-mix(in srgb, var(--om-ink) 30%, transparent);
  --om-level-good-tint:   color-mix(in srgb, var(--om-level-good) 13%, transparent);
  --om-level-mild-tint:   color-mix(in srgb, var(--om-level-mild) 13%, transparent);
  --om-level-warm-tint:   color-mix(in srgb, var(--om-level-warm) 13%, transparent);
  --om-level-danger-tint: color-mix(in srgb, var(--om-level-danger) 13%, transparent);
  --om-text-on-dark:       var(--om-ink-on-dark);
  --om-text-muted-on-dark: var(--om-ink-muted-on-dark);

  --om-level-ok:     var(--om-ink);         /* no warning: neutral */
  --om-level-good:   var(--om-sig-green);
  --om-level-mild:   var(--om-sig-yellow);
  --om-level-warm:   var(--om-sig-orange);
  --om-level-danger: var(--om-sig-red);
}

/* ── Layer 2: text styles ──────────────────────────────────────────────────
   Lato has only two weights here: 400 (normal) and 700 (bold).
   Use only these two values. */

/* 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;
}

/* Page title and subtitle in the header ("Bernometer" / tagline). */
.jumbotron-heading {
  font-size: var(--fs-title);
  font-weight: 700;
  margin: 0;
}
.jumbotron-subtitle {
  font-size: var(--fs-subtitle);
  font-weight: 400;
  margin: 0;
}
@media (max-width: 620px) {
  .jumbotron-heading  { font-size: var(--fs-title-sm); }
  .jumbotron-subtitle { font-size: var(--fs-subtitle-sm); }
}

/* 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: only the area behind the cards.
   Title row and tab row stay light. Switch via --om-page-bg. */
body, .wrapper, .content-wrapper {
  background-color: var(--om-page-bg) !important;
}
.jumbotron,
#tabs {
  background-color: var(--om-surface);
}

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


/* ── Accent: myurbanclimate orange ────────────────────────────────────────
   Only for navigation and interaction, never for data. Data uses the
   warning level colours only, so the accent cannot be mistaken for a
   warning.

/* Links in text: dark orange, underlined (like myurbanclimate). */
.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);
}