/*
 * Uthereal look for a self-hosted Twenty (2.54), after Victor's technical design system
 * (work/uthereal-designs/technical: DESIGN.md and tokens/). The Dockerfile links it after
 * Twenty's own CSS; it only overrides Twenty's theme variables (--t-*), so no Twenty code is
 * changed and an upgrade keeps working as long as the variable names stay. Re-check on every
 * upgrade: python3 -m src.setup.checks.theme_check <url>.
 *
 * What it takes from the system: the blue-white page, ink text with slate secondary text, one
 * blue accent, hairline ink borders, Geist, and square corners (the system cuts corners, it never
 * rounds them). The system is light only (C1), so dark mode only gets the accent and the font.
 */

@font-face {
  font-family: "Geist";
  src: url("/uthereal/fonts/Geist-Variable.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Geist Mono";
  src: url("/uthereal/fonts/GeistMono-Variable.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Twenty sets Inter on the page body directly, so record text would not follow the variable. */
html,
body {
  font-family: "Geist", Inter, sans-serif;
}

/* Both modes: the accent scale rebuilt around the system blue #2b6ff8, and the font. */
.light,
.dark {
  --t-font-family: "Geist", Inter, sans-serif;
  --t-accent-accent9: #2b6ff8;
  --t-accent-accent10: #2160e8;
  --t-snack-bar-info-color: #2b6ff8;
}

.light {
  --t-accent-accent1: #fbfcff;
  --t-accent-accent2: #f4f7ff;
  --t-accent-accent3: #eaf1ff;
  --t-accent-accent4: #dde8ff;
  --t-accent-accent5: #cfdeff;
  --t-accent-accent6: #bccffe;
  --t-accent-accent7: #a3bdfd;
  --t-accent-accent8: #82a5fb;
  --t-accent-accent11: #2160e8;
  --t-accent-accent12: #0f2a66;
  --t-accent-accent3570: #82a5fb;
  --t-accent-accent4060: #82a5fb;
  --t-accent-primary: #cfdeff;
  --t-accent-secondary: #cfdeff;
  --t-accent-tertiary: #eaf1ff;
  --t-accent-quaternary: #f4f7ff;
  --t-border-color-blue: #a3bdfd;
  --t-background-transparent-blue: #2b6ff812;
  --t-snack-bar-info-background-color: #2b6ff812;

  /* Surfaces: page, card, table cell, mist. */
  --t-background-primary: #f9f9ff;
  --t-background-secondary: #f3f4fa;
  --t-background-tertiary: #ececf2;
  --t-background-quaternary: #e6e7e9;
  --t-background-inverted-primary: #080f1c;
  --t-background-primary-inverted: #080f1c;
  --t-background-transparent-primary: #f9f9ff80;
  --t-background-transparent-secondary: #f9f9ff66;
  --t-background-transparent-strong: #080f1c29;
  --t-background-transparent-medium: #080f1c14;
  --t-background-transparent-light: #080f1c0a;
  --t-background-transparent-lighter: #080f1c05;

  /* Text: ink, slate-text, then the system's quiet greys. */
  --t-font-color-primary: #080f1c;
  --t-font-color-secondary: #5f6267;
  --t-font-color-tertiary: #6c6f74;
  --t-font-color-light: #9aa0a8;
  --t-font-color-extra-light: #b9bec7;
  --t-tooltip-background: #080f1ce6;

  /* Hairline ink borders: ink at 17%, 10% and 7%. */
  --t-border-color-strong: #080f1c2b;
  --t-border-color-medium: #080f1c1a;
  --t-border-color-light: #080f1c12;
  --t-border-color-inverted: #080f1c;

  /* Depth from a hairline, not a soft shadow; menus keep a faint drop so they read as floating. */
  --t-box-shadow-light: 0 0 0 1px #080f1c1a;
  --t-box-shadow-strong: 0 0 0 1px #080f1c2b, 0 8px 24px -12px #080f1c29;
}

/* Square corners. Pills and circles (avatars, toggles) keep their shape. */
.light,
.dark {
  --t-border-radius-xs: 0;
  --t-border-radius-sm: 0;
  --t-border-radius-md: 0;
  --t-border-radius-lg: 0;
  --t-border-radius-xl: 0;
  --t-border-radius-xxl: 0;
  --t-border-radius-sm-round: 0;
  --t-border-radius-md-round: 0;
  --t-border-radius-lg-round: 0;
}

/* Note previews (a note's card on a record): Twenty sets line-break: anywhere, which splits words in the middle
   ("Fr | om", "re | al"). Break between words; split only very long strings such as web addresses (Raian, 4 Nov 2026:
   the preview "doesn't" read well). Twenty's class name changes with its build: re-check on every upgrade. */
.s5mm0tm {
  line-break: auto;
  overflow-wrap: anywhere;
}