/*
 * Base layer: reset, theme tokens, root typography, small helpers.
 *
 * The Denver frame renders this in an Android WebView around Chromium 87, so
 * everything here stays inside that baseline: no oklch(), no color-mix(), no
 * :has(), no :is()/:where(), no cascade layers, no nesting, no aspect-ratio,
 * no inset shorthand, no dvh. Translucent colours come from rgba() over an
 * "r, g, b" custom property, which works back to Chromium 49.
 *
 * Load order matters and is fixed in the layout:
 *   application -> components -> frame -> pages
 */

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Day. Warm paper, high contrast, readable in direct daylight. */
:root {
  --bg: #faf8f4;
  --surface: #f1eee9;
  --surface-alt: #e1ded7;

  --content-rgb: 30, 36, 46;
  --content: rgb(30, 36, 46);

  --primary-rgb: 3, 110, 174;
  --primary: rgb(3, 110, 174);
  --primary-content: #f6f9fc;

  --neutral-content-rgb: 243, 245, 249;

  --error: #cf4040;
  --error-content: #fcf7f7;
  --success: #3b9555;
  --success-content: #f6f9f7;
  --warning: #dc9e12;
  --warning-content: #2c1f09;

  --price-low: #dbcfbc;
  --price-mid: #c58a52;
  --price-high: #ad4f3a;
  --price-run: #4f8a5b;

  --solar-production: #d59b1f;
  --solar-consumption: #5b7c9c;
  --solar-charge: #4f8a5b;

  /* One per calendar feed. The day theme wants them dark enough to read as
     text on a 18% wash of themselves over warm paper. */
  --feed-blaa: 21, 92, 158;
  --feed-groen: 34, 106, 71;
  --feed-lilla: 104, 65, 158;
  --feed-rose: 165, 48, 88;
  --feed-ravgul: 146, 89, 12;
  --feed-skifer: 72, 84, 100;

  --radius-box: 1rem;
  --radius-field: 0.5rem;
  --border-color: rgba(30, 36, 46, 0.12);
}

/* Night. Near-black, low light output, muted content. */
:root[data-theme="bredager-nat"] {
  --bg: #0c1016;
  --surface: #06090f;
  --surface-alt: #030409;

  --content-rgb: 194, 200, 209;
  --content: rgb(194, 200, 209);

  --primary-rgb: 95, 165, 222;
  --primary: rgb(95, 165, 222);
  --primary-content: #050c13;

  --neutral-content-rgb: 212, 216, 222;

  --error: #df6862;
  --error-content: #130807;
  --success: #6fb07d;
  --success-content: #060e07;
  --warning: #e0ae57;
  --warning-content: #181003;

  --price-low: #4b4238;
  --price-mid: #a97a44;
  --price-high: #c05f48;
  --price-run: #71ab7d;

  --solar-production: #b8871f;
  --solar-consumption: #56718b;
  --solar-charge: #71ab7d;

  /* The night theme wants them light: the same wash sits on near-black. */
  --feed-blaa: 122, 178, 232;
  --feed-groen: 116, 194, 149;
  --feed-lilla: 175, 148, 233;
  --feed-rose: 232, 140, 168;
  --feed-ravgul: 223, 174, 97;
  --feed-skifer: 158, 170, 186;

  --border-color: rgba(194, 200, 209, 0.14);
}

/* The frame is read from about a metre away, so the whole type scale is
   enlarged at the root instead of per-element. Size everything in rem. */
html {
  font-size: 20px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  line-height: 1.4;
  background-color: var(--bg);
  color: var(--content);
}

/* Kiosk hygiene: no text selection, no long-press menus, no bounce scroll. */
body.frame-kiosk {
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}

h1,
h2,
h3,
p,
ul,
ol,
figure {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: var(--primary);
}

/* Helpers ------------------------------------------------------------- */

/* Overrides a component's own display, so the frame controller can hide an
   overlay that is otherwise flex. */
.hidden {
  display: none !important;
}

/* Turbo frames wrap a card that must take part in the parent flex column. */
.contents {
  display: contents;
}

.tabular {
  font-variant-numeric: tabular-nums;
}

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.muted {
  color: rgba(var(--content-rgb), 0.6);
}

.dim {
  color: rgba(var(--content-rgb), 0.5);
}

.danger {
  color: var(--error);
}

/* Feed colours. A class sets which of the theme's six shades an element wears;
   everything that draws a calendar event reads `--feed`. */
.u-color--blaa { --feed: var(--feed-blaa); }
.u-color--groen { --feed: var(--feed-groen); }
.u-color--lilla { --feed: var(--feed-lilla); }
.u-color--rose { --feed: var(--feed-rose); }
.u-color--ravgul { --feed: var(--feed-ravgul); }
.u-color--skifer { --feed: var(--feed-skifer); }