/*
 * Kolleg-tema för LibreChat.
 *
 * ⚠️ LibreChats färgvariabler är RGB-TRIPPLETTER, inte hex. De används som
 * `rgb(var(--surface-primary))`, så ett hex-värde gör hela deklarationen ogiltig
 * och sidan faller tillbaka på standardtemat — utan felmeddelande.
 *
 * Skriv alltså `242 245 246`, aldrig `#F2F5F6`. Det här misstaget gjordes en
 * gång och gav mörk text på mörk botten på inloggningssidan.
 *
 * Värdena speglar /design/system/tokens.css. Ändra i tokens först, spegla hit.
 *
 * ⚠️ Selektorlistan måste täcka ALLA LibreChats varianter. De använder `html`,
 * `.dark`, `.gizmo` och `.gizmo.dark`. Den sista har specificitet 0,2,0 och slår
 * en ensam `.dark` — vilket gjorde att mörkt läge överlevde vår första
 * temaöverskrivning trots att filen laddades sist.
 *
 * Kolleg har inget mörkt läge (se /strategy/design-system.md). Alla varianter
 * får därför samma ljusa värden — LibreChat väljer annars mörkt efter
 * användarens systeminställning.
 */

:root,
.dark,
.gizmo,
.gizmo.dark,
html.dark,
html.gizmo,
html.gizmo.dark {
	/* Ytor */
	--surface-primary: 242 245 246;
	--surface-primary-alt: 255 255 255;
	--surface-primary-contrast: 255 255 255;
	--surface-secondary: 255 255 255;
	--surface-secondary-alt: 231 238 240;
	--surface-tertiary: 231 238 240;
	--surface-tertiary-alt: 220 231 235;
	--surface-chat: 242 245 246;
	--surface-dialog: 255 255 255;
	--surface-hover: 220 231 235;
	--surface-hover-alt: 206 221 228;
	--surface-active: 206 221 228;
	--surface-active-alt: 190 210 219;
	--surface-submit: 14 26 36;
	--surface-submit-hover: 27 44 58;
	--surface-inverted: 14 26 36;
	--surface-inverted-hover: 27 44 58;
	--surface-overlay: 14 26 36;

	/* Text */
	--text-primary: 14 26 36;
	--text-secondary: 62 80 91;
	--text-secondary-alt: 92 110 121;
	--text-tertiary: 140 153 161;
	--text-inverted: 242 245 246;
	--text-fixed: 255 255 255;

	/* Accent – ockra. Enda accenten, används sparsamt. */
	--accent-primary: 168 104 26;
	--accent-primary-hover: 142 86 20;
	--ring-primary: 168 104 26;
	--link: 168 104 26;
	--link-hover: 142 86 20;
	--link-visited: 142 86 20;

	/* Linjer
	 *
	 * ⚠️ `--border-*-alpha` är OPACITET, inte färg. LibreChat skriver
	 *     border-color: rgb(var(--border-light) / calc(var(--border-light-alpha,1) * …))
	 * En färgtriplett där gör hela deklarationen ogiltig, och border-color
	 * faller då tillbaka på sitt initialvärde `currentColor` — alltså
	 * textfärgen. Resultatet blev skarpa nästan svarta ramar på precis allt:
	 * inmatningsfältet, modellväljaren, knapparna och sidopanelens kant.
	 * Felet fanns i produktionstemat 2026-09-17 och hittades genom att mäta
	 * computed border-color i appen, inte genom att läsa CSS:en.
	 *
	 * Våra tripletter är redan färdiga toner, så alfat ska vara 1. */
	--border-light: 228 234 237;
	--border-light-alpha: 1;
	--border-medium: 220 227 231;
	--border-medium-alt: 220 227 231;
	--border-medium-alpha: 1;
	--border-heavy: 194 205 211;
	--border-heavy-alpha: 1;
	--border-xheavy: 176 189 196;
	--border-xheavy-alpha: 1;

	/* Chattytan. LibreChat sätter den till vitt; papper binder ihop den med
	 * webben och gör att kortens vita ytor får något att vila mot. */
	--presentation: 242 245 246;

	/* Sidhuvud */
	--header-primary: 242 245 246;
	--header-hover: 220 231 235;
	--header-button-hover: 206 221 228;
}

/* ---------------------------------------------------------------------------
 * Typografi. Samma typsnitt som webben.
 *
 * @font-face-reglerna ligger i /kolleg/typsnitt.css och länkas separat av
 * proxyn. De får INTE @import:eras hit: enligt specifikationen måste @import
 * stå först i filen, så mitt i den ignoreras den utan felmeddelande.
 * ------------------------------------------------------------------------- */
body,
input,
textarea,
button,
select,
[contenteditable='true'] {
	font-family: 'IBM Plex Sans', system-ui, sans-serif;
}

h1, h2, h3 {
	font-family: 'Space Grotesk', system-ui, sans-serif;
	letter-spacing: -0.03em;
}

/* ---------------------------------------------------------------------------
 * Märket i bakgrunden.
 *
 * `.bg-presentation` sitter på NIO element (uppmätt i appen, inte gissat).
 * Två av dem är stora och nästlade:
 *
 *   .grow    ytterhöljet – fyller alltid hela höjden
 *   .flex-1  meddelandeytan – slutar ovanför inmatningsfältet i ett samtal,
 *            men fyller hela höjden i den tomma vyn
 *
 * Ringen låg först på `.flex-1`. Det såg rätt ut i tomma vyn men klippte
 * märket rakt av med en vågrät kant så fort ett samtal öppnades. Den ligger
 * nu på `.grow`, som alltid fyller höjden.
 *
 * Två lager ovanpå måste göras genomskinliga, annars målar de sitt eget
 * ogenomskinliga papper över bilden — och det var exakt den vågräta kanten:
 *
 *   .flex-1                       meddelandeytan
 *   [view-transition-name:chat-form]  inmatningsfältets omslag, som är
 *                                 FULLBRETT och alltså täcker hela nederkanten
 *
 * Båda ligger på samma papperston som `.grow`, så genomskinligheten syns inte
 * någon annanstans än att märket blir helt.
 *
 * Tonerna är avsiktligt nästan omärkliga. Ett första försök använde bläck och
 * full ockra: då blev märket en illustration mitt i chatten i stället för en
 * struktur bakom den. Samma geometri som i /strategy/design-system.md —
 * öppningen är ~21 % av omkretsen, vriden -62 grader.
 *
 * Placering och skala (Erik 2026-09-17: "uppe i hörnet, mycket större, men
 * svagare"). Märket är 1 500 px men förskjutet 640 px ut i det övre högra
 * hörnet, så att bara en bågsvep och kanten av pricken syns. Förskjutningen
 * är nödvändig: pricken sitter alltid i märkets mitt, så ett stort märke utan
 * förskjutning lägger en beige skiva mitt i lästexten. Nere till höger låg det
 * tidigare — men där konkurrerade det med inmatningsfältet.
 * ------------------------------------------------------------------------- */
.bg-presentation.grow {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140'%3E%3Ccircle cx='70' cy='70' r='30' fill='none' stroke='%23E4EBEF' stroke-width='7' stroke-dasharray='150 39' transform='rotate(-62 70 70)'/%3E%3Ccircle cx='70' cy='70' r='12' fill='%23F1EBE1'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right -640px top -640px;
	background-size: 1500px 1500px;
}

.bg-presentation.flex-1,
.bg-presentation[class*='view-transition-name:chat-form'] {
	background-color: transparent;
}

/* Svaren ska kunna vila mot ytan i stället för mot en ram. */
.bg-presentation .prose {
	max-width: 74ch;
}