/* tesdash design tokens — the only place raw values live. app.css uses var() only.
   ::backdrop is listed because before Chrome 122 it could not inherit from :root. */
:root, ::backdrop {
  /* Surfaces: flat, near-black, each step a small lift */
  --c-bg: #0a0b0d;
  --c-surface-1: #131518;
  --c-surface-2: #1b1e22;
  --c-surface-3: #262a2f;
  --c-surface-4: #31363c;
  --c-line: #22262b;
  --c-line-strong: #383d44;

  /* Text */
  --c-text: #f4f6f7;
  --c-text-muted: #9ba4ad;
  --c-text-faint: #7d868f;

  /* One cold accent, used sparingly */
  --c-accent: #19d8ff;
  --c-accent-ink: #00161c;
  --c-accent-press: #6be6ff;

  /* Destructive: deep red, never pink */
  --c-danger: #b3202a;
  --c-danger-press: #c9333d;
  --c-danger-ink: #ffffff;

  /* Warning (info lines only) */
  --c-warn: #f2c14e;

  /* Norwegian cue — flag red/white, blue lifted so it reads on near-black */
  --c-no-red: #ba0c2f;
  --c-no-white: #ffffff;
  --c-no-blue: #2f5fd0;

  /* Pressed overlay for brand-coloured tiles (lighter surface) */
  --c-press-veil: rgba(255, 255, 255, 0.16);
  --c-hidden-glyph: #6b737c;
  --c-scrim: rgba(0, 0, 0, 0.72);

  /* Colours offered for your own tiles (ink is picked automatically for contrast) */
  --swatch-1: #2f5fd0;
  --swatch-2: #6741d9;
  --swatch-3: #c62828;
  --swatch-4: #e8590c;
  --swatch-5: #f2c14e;
  --swatch-6: #2b8a3e;
  --swatch-7: #0b7285;
  --swatch-8: #74c0fc;
  --swatch-9: #a61e4d;
  --swatch-10: #5c636e;

  /* Spacing — 4 px base */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --page-pad: clamp(16px, 2.5vw, 48px);
  --gutter: 16px;

  /* Sizes */
  --tap: 56px;
  --tile-min: 150px;
  --tile-max: 236px;
  --tile-recent: 160px;
  --tile-edit-min: 176px;
  --tile-cut: 16px;
  --marker: 7px;
  --marker-inset: 2px;
  --icon: 24px;
  --icon-sm: 20px;
  --badge-h: 40px;
  --seg-min: 120px;
  --search-end: 128px;
  --swatch-check: 28px;
  --wordmark-h: 30px;
  --hairline: 1px;
  --hairline-accent: 2px;
  --hairline-accent-w: 32px;
  --tricolour-h: 2px;
  --tricolour-w: 36px;
  --content-max: 2104px;
  --panel-w: 640px;
  --basis-sm: 280px;   /* flex-basis before text wraps under its button */
  --basis-md: 360px;
  --basis-lg: 480px;

  /* Radius */
  --r-sm: 6px;
  --r-md: 10px;
  --r-tile: 10px;
  --r-lg: 16px;
  --r-pill: 999px;
  --r-app-icon: 22.5%;

  /* Focus: 3 px accent ring, offset, same geometry in every state */
  --focus-w: 3px;
  --focus-offset: 3px;

  /* Type */
  --font: system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --fs-label: 16px;
  --fs-body: 18px;
  --fs-control: 20px;
  --fs-tile: 20px;
  --fs-title: 26px;
  --fs-display: 36px;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --lh-tight: 1.15;
  --lh-body: 1.45;
  --ls-label: 0.14em;
  --ls-tight: -0.01em;
  --ls-mono: -0.03em;
  --mono-scale: 0.55;     /* monogram font-size as a share of tile size: caps ≈ 40% of the tile */
  --mono-scale-3: 0.45;   /* three letters (app.js shrinks any that still overflow) */
  --mono-scale-4: 0.34;   /* four letters */
  --mono-nudge: -0.15em;  /* lifts cap tops to the same inset as brand glyph tops */
  --glyph-scale: 0.4;     /* app icon size as a share of tile size (matches monogram caps) */
  --hidden-icon-opacity: 0.55;

  /* Motion — everything under 150 ms */
  --t-fast: 80ms;
  --t-base: 120ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);

  /* Layers */
  --z-header: 10;
  --z-panel: 20;
  --z-toast: 30;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --t-fast: 0ms;
    --t-base: 0ms;
  }
}

/* Brand tiles: --brand-<id> background + --brand-<id>-ink text.
   Generated from services.js by tools/brand-tokens.mjs — edit services.js, then re-run. */
/* brand:start */
:root {
  --brand-nrk-tv: #073b84;
  --brand-nrk-tv-ink: #ffffff;
  --brand-tv2-play: #6f03ff;
  --brand-tv2-play-ink: #ffffff;
  --brand-viaplay: #d80c50;
  --brand-viaplay-ink: #ffffff;
  --brand-strim: #faed6f;
  --brand-strim-ink: #0a0b0d;
  --brand-rikstv: #d23e3a;
  --brand-rikstv-ink: #ffffff;
  --brand-telia-play: #990ae3;
  --brand-telia-play-ink: #ffffff;
  --brand-allente: #fd6100;
  --brand-allente-ink: #0a0b0d;
  --brand-skyshowtime: #832192;
  --brand-skyshowtime-ink: #ffffff;
  --brand-netflix: #e50914;
  --brand-netflix-ink: #ffffff;
  --brand-disney-plus: #113ccf;
  --brand-disney-plus-ink: #ffffff;
  --brand-hbo-max: #33383e;
  --brand-hbo-max-ink: #ffffff;
  --brand-prime-video: #00a8e1;
  --brand-prime-video-ink: #0a0b0d;
  --brand-apple-tv: #33383e;
  --brand-apple-tv-ink: #ffffff;
  --brand-youtube: #eb0000;
  --brand-youtube-ink: #ffffff;
  --brand-twitch: #9146ff;
  --brand-twitch-ink: #ffffff;
  --brand-plex: #ebaf00;
  --brand-plex-ink: #0a0b0d;
  --brand-crunchyroll: #f47521;
  --brand-crunchyroll-ink: #0a0b0d;
  --brand-pluto-tv: #fff200;
  --brand-pluto-tv-ink: #0a0b0d;
  --brand-spotify: #1ed760;
  --brand-spotify-ink: #0a0b0d;
  --brand-nrk-radio: #0a2343;
  --brand-nrk-radio-ink: #ffffff;
  --brand-p4: #c7017f;
  --brand-p4-ink: #ffffff;
  --brand-youtube-music: #eb0000;
  --brand-youtube-music-ink: #ffffff;
  --brand-apple-music: #e32137;
  --brand-apple-music-ink: #ffffff;
  --brand-tidal: #33383e;
  --brand-tidal-ink: #ffffff;
  --brand-abrp: #b51b1b;
  --brand-abrp-ink: #ffffff;
  --brand-plugshare: #003ca6;
  --brand-plugshare-ink: #ffffff;
  --brand-elbil-ladekart: #004c9c;
  --brand-elbil-ladekart-ink: #ffffff;
  --brand-vegvesen: #e61a2d;
  --brand-vegvesen-ink: #ffffff;
  --brand-google-maps: #1a73e8;
  --brand-google-maps-ink: #ffffff;
  --brand-yr: #00b8f1;
  --brand-yr-ink: #0a0b0d;
  --brand-windy: #9d0300;
  --brand-windy-ink: #ffffff;
  --brand-xbox-cloud-gaming: #107c10;
  --brand-xbox-cloud-gaming-ink: #ffffff;
  --brand-geforce-now: #76b900;
  --brand-geforce-now-ink: #0a0b0d;
  --brand-boosteroid: #5c35ee;
  --brand-boosteroid-ink: #ffffff;
  --brand-parsec: #25abff;
  --brand-parsec-ink: #0a0b0d;
  --brand-shadow: #3d46cc;
  --brand-shadow-ink: #ffffff;
  --brand-amazon-luna: #5a189a;
  --brand-amazon-luna-ink: #ffffff;
  --brand-poki: #009cff;
  --brand-poki-ink: #0a0b0d;
  --brand-grok: #33383e;
  --brand-grok-ink: #ffffff;
  --brand-chatgpt: #10a37f;
  --brand-chatgpt-ink: #0a0b0d;
  --brand-claude: #d97757;
  --brand-claude-ink: #0a0b0d;
  --brand-gemini: #6e5ce6;
  --brand-gemini-ink: #ffffff;
  --brand-deepseek: #3b5bdb;
  --brand-deepseek-ink: #ffffff;
  --brand-reddit: #ff4500;
  --brand-reddit-ink: #0a0b0d;
  --brand-x: #33383e;
  --brand-x-ink: #ffffff;
  --brand-finn: #0063fb;
  --brand-finn-ink: #ffffff;
}
/* brand:end */