/*
* FoderTorget — designsystem ovanpå Bootstrap 5.3.
*
* Schweizisk grafisk design / light brutalism:
* · noll rundade hörn, överallt
* · 1px svarta linjer grupperar innehåll — inga svävande kort med skuggor
* · grotesk i rubriker, monospace i etiketter och siffror
* · asymmetriskt rutnät, inte tre lika breda kort
*
* Nästan allt görs genom att skriva om Bootstraps egna CSS-variabler i stället
* för att jaga selektorer med !important. Bootstrap 5.3 läser dem i runtime, så
* en omdefinition på :root slår igenom i komponenter vi aldrig rör.
*
* Typsnitten är systemtypsnitt med flit. CSP förbjuder CDN, och Helvetica ÄR
* den schweiziska grotesken — det autentiska valet är också det som inte kräver
* en enda extra begäran.
*/
:root {
/* --- Typografi ------------------------------------------------------ */
--ft-grotesque: "Helvetica Neue", Helvetica, Inter, "Liberation Sans", Arial, sans-serif;
--ft-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas,
"Liberation Mono", "DejaVu Sans Mono", monospace;
--bs-font-sans-serif: var(--ft-grotesque);
--bs-font-monospace: var(--ft-mono);
--bs-body-font-family: var(--ft-grotesque);
/* --- Färg ----------------------------------------------------------- */
/*
* Varje grundfärg finns i två former: en triplett och en färg byggd av den.
* Det är inte dubbelarbete. Bootstrap 5.3 läser en rad värden som
* rgba(var(--bs-*-rgb), α) — bland annat varje och .text-body — och en
* sådan variabel går inte att fylla med en hex. Tripletten är den enda
* formen som når hela Bootstrap; hexen i kommentaren är för ögat.
*
* Mörkt läge skriver därför bara om tripletterna. Allt nedanför följer med
* av sig självt, eftersom det bara pekar vidare.
*/
--ft-ink-rgb: 17, 17, 17; /* #111111 */
--ft-paper-rgb: 255, 255, 255; /* #ffffff */
--ft-paper-alt-rgb: 244, 244, 242; /* #f4f4f2 */
--ft-muted-rgb: 107, 107, 107; /* #6b6b6b */
--ft-accent-rgb: 31, 122, 61; /* #1f7a3d — vallgrönt, plattat */
--ft-ink: rgb(var(--ft-ink-rgb));
--ft-paper: rgb(var(--ft-paper-rgb));
--ft-paper-alt: rgb(var(--ft-paper-alt-rgb));
--ft-muted: rgb(var(--ft-muted-rgb));
--ft-accent: rgb(var(--ft-accent-rgb));
--ft-rule: #111111;
/* Sekundär linje. Schweizisk typografi bygger på hierarki mellan linjer,
inte på att varje linje skriker lika högt: #111 bär strukturen, hårlinjen
delar innehåll inom den. Utan skillnaden blir uppslaget ett kalkylblad. */
--ft-hairline: #d8d8d3;
/*
* Text som ligger PÅ en fylld yta. --ft-paper duger i båda lägena — vitt på
* mörkgrönt när sidan är ljus, mörkgrönt på ljusgrönt när den är mörk — så
* raden behöver aldrig skrivas om. Det var precis vad --ft-accent-ink lades
* till för och sedan aldrig användes: knapparna skrev #fff rakt av, och i
* mörkt läge blev det vit text på nästan vit botten.
*/
--ft-accent-ink: var(--ft-paper);
--ft-danger: #b91c1c;
--ft-danger-ink: var(--ft-paper);
/* Signalgult är samma gult i båda lägena — en varning ska väga lika tungt
oavsett. Därför är dess text FAST mörk och inte --ft-ink, som vänder. */
--ft-signal: #ffd200;
--ft-signal-ink: #111111;
/* --- Bootstraps ikoner, som ligger som data-URI:er -------------------- */
/*
* Fyra ikoner är SVG:er inbakade i Bootstrap-variabler. En url() kan inte
* innehålla var(), så färgen måste ligga i strängen — och Bootstraps ljusa
* varianter finns bara under [data-bs-theme=dark], ett attribut vi aldrig
* sätter. Genom att lyfta hela url():en hit hamnar bilden i paletten
* tillsammans med allt annat som vänder, i stället för i en regel som
* någon måste minnas att spegla i båda mörka blocken.
*/
--ft-select-chevron: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23111111' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
/* Bocken och punkten ligger PÅ .form-check-input:checked, som fylls med
--ft-ink. De ska alltså ha papperets färg, inte bläckets. */
--ft-check-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
--ft-radio-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23ffffff'/%3e%3c/svg%3e");
--ft-toggler-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23111111' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
--ft-close-filter: none;
/* --- Lägesberoende värden som inte är färger -------------------------- */
--ft-media-filter: saturate(.92);
--ft-toggle-to-dark: inline-flex;
--ft-toggle-to-light: none;
color-scheme: light;
--bs-body-color: var(--ft-ink);
--bs-body-bg: var(--ft-paper);
--bs-secondary-color: var(--ft-muted);
--bs-border-color: var(--ft-rule);
--bs-border-color-translucent: var(--ft-rule);
--bs-border-width: 1px;
--bs-emphasis-color: var(--ft-ink);
--bs-link-color: var(--ft-ink);
--bs-link-hover-color: var(--ft-accent);
/* --- Bryggan till Bootstraps rgb-variabler ---------------------------- */
/*
* Raderna ovanför räcker inte, och det är hela orsaken till att kortens
* rubriker en gång var oläsliga i mörkt läge. Bootstrap läser .text-body och
* varje naken som rgba(var(--bs-*-rgb), α) — de bryr sig alltså inte om
* --bs-body-color, utan om --bs-body-color-rgb, som vi aldrig satte. Den
* behöll då Bootstraps förval 33,37,41: mörkgrå text på mörkgrönt papper,
* 1,16:1.
*
* Bootstraps egna mörka värden ligger uteslutande under [data-bs-theme=dark]
* — det finns inte en enda prefers-color-scheme-regel i hela dist-filen. Att
* sätta det attributet skulle därför bara laga läget "uttryckligt mörkt" och
* lämna förvalet "följ systemet" trasigt, vilket är det läge de flesta ser.
* Bryggan nedan är det enda som täcker alla tre lägena.
*/
--bs-body-color-rgb: var(--ft-ink-rgb);
--bs-body-bg-rgb: var(--ft-paper-rgb);
--bs-emphasis-color-rgb: var(--ft-ink-rgb);
--bs-secondary-color-rgb: var(--ft-muted-rgb);
--bs-tertiary-color-rgb: var(--ft-muted-rgb);
--bs-link-color-rgb: var(--ft-ink-rgb);
--bs-link-hover-color-rgb: var(--ft-accent-rgb);
/* .text-body-tertiary. Bootstraps förval är rgba(bläck, .5), som mot vitt
blir #909294 och faller på 3,12:1 redan i ljust läge. Tertiär får därför
samma ton som sekundär — det enda värdet som klarar AA i båda lägena. */
--bs-tertiary-color: var(--ft-muted);
/* Grå plattor: inaktiva fält, .pagination hover/disabled, .nav-tabs hover.
Bootstraps #e9ecef/#f8f9fa vänder aldrig och lyser som hål i mörkt läge. */
--bs-secondary-bg: var(--ft-paper-alt);
--bs-secondary-bg-rgb: var(--ft-paper-alt-rgb);
--bs-tertiary-bg: var(--ft-paper-alt);
--bs-tertiary-bg-rgb: var(--ft-paper-alt-rgb);
/* Formulärvalidering. .invalid-feedback finns på 19 ställen. */
--bs-form-invalid-color: var(--ft-danger);
--bs-form-invalid-border-color: var(--ft-danger);
--bs-form-valid-color: var(--ft-accent);
--bs-form-valid-border-color: var(--ft-accent);
/* , både Bootstraps .mark och träffmarkeringen i .ft-snippet. */
--bs-highlight-bg: var(--ft-signal);
--bs-highlight-color: var(--ft-signal-ink);
--bs-code-color: var(--ft-accent);
/* --- Noll radie. Alla Bootstraps radievariabler, inte bara en. ------- */
--bs-border-radius: 0;
--bs-border-radius-sm: 0;
--bs-border-radius-lg: 0;
--bs-border-radius-xl: 0;
--bs-border-radius-xxl: 0;
--bs-border-radius-2xl: 0;
--bs-border-radius-pill: 0;
/* --- Inga skuggor --------------------------------------------------- */
--bs-box-shadow: none;
--bs-box-shadow-sm: none;
--bs-box-shadow-lg: none;
--bs-box-shadow-inset: none;
}
/* Bootstrap sätter radie direkt på ett fåtal ställen och via .rounded-*.
Den här regeln är den enda globala hammaren i filen — allt annat är
variabler — och den finns för att en enda kvarglömd rundning förstör hela
uttrycket. */
*,
*::before,
*::after {
border-radius: 0 !important;
}
/* Ett undantag, och bara ett: radioknappen behåller sin cirkel.
Fyrkantig blir den omöjlig att skilja från en kryssruta, och skillnaden
mellan "välj en" och "välj flera" är information, inte dekoration. */
.form-check-input[type="radio"] {
border-radius: 50% !important;
}
/* Skuggor likaså: .shadow, .shadow-sm och .card fångas i ett svep. */
.shadow,
.shadow-sm,
.shadow-lg,
.card,
.dropdown-menu,
.offcanvas,
.modal-content {
box-shadow: none !important;
}
body {
background: var(--ft-paper);
-webkit-font-smoothing: antialiased;
}
/* --- Rubriker: tät grotesk --------------------------------------------- */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.navbar-brand,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
font-family: var(--ft-grotesque);
font-weight: 700;
letter-spacing: -0.022em;
line-height: 1.05;
text-wrap: balance;
}
.display-5 {
font-weight: 800;
letter-spacing: -0.035em;
}
/* Ett schweiziskt manér som faktiskt bär funktion: versal monospace-etikett
ovanför ett block talar om vad blocket är utan att ta rubrikens plats. */
.ft-eyebrow {
font-family: var(--ft-mono);
font-size: .6875rem;
font-weight: 600;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--ft-muted);
display: block;
margin-bottom: .5rem;
}
.ft-rule-top {
border-top: 1px solid var(--ft-rule);
padding-top: .75rem;
}
/* --- Etiketter och siffror: monospace ---------------------------------- */
.badge,
.form-label,
.form-text,
.breadcrumb,
.nav-tabs .nav-link,
.pagination,
.table thead th,
.ft-meta {
font-family: var(--ft-mono);
letter-spacing: .02em;
}
.badge {
font-size: .6875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .08em;
padding: .3em .55em;
border: 1px solid var(--ft-rule);
background: var(--ft-paper) !important;
color: var(--ft-ink) !important;
}
/* Bootstraps text-bg-* fylls i igen, men platt och utan rundning.
Varje färgpar går via tokens: en fast #fff här betyder vit text på nästan
vit botten så fort --ft-ink vänder. text-bg-warning är den värsta av dem —
den bär "väntar", "reserverad" och "behöver granskas". */
.badge.text-bg-success { background: var(--ft-accent) !important; color: var(--ft-accent-ink) !important; border-color: var(--ft-accent); }
.badge.text-bg-dark { background: var(--ft-ink) !important; color: var(--ft-paper) !important; }
.badge.text-bg-warning { background: var(--ft-signal) !important; color: var(--ft-signal-ink) !important; }
.badge.text-bg-primary { background: var(--ft-ink) !important; color: var(--ft-paper) !important; }
.badge.text-bg-info { background: var(--ft-paper-alt) !important; color: var(--ft-ink) !important; }
.badge.text-bg-secondary{ background: var(--ft-paper-alt) !important; color: var(--ft-muted) !important; }
.badge.text-bg-light { background: var(--ft-paper) !important; color: var(--ft-muted) !important; }
.form-label {
font-size: .6875rem;
font-weight: 600;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--ft-ink);
margin-bottom: .35rem;
}
.form-text {
font-size: .75rem;
color: var(--ft-muted);
}
/* Siffror ska stå i kolumn — priser och näringsvärden jämförs i blicken. */
.ft-num,
.table td,
.ft-nutrition-strip .ft-value {
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum" 1;
}
/* --- Linjer i stället för kort ----------------------------------------- */
.card {
border: 1px solid var(--ft-rule);
background: var(--ft-paper);
}
/* Staplade kort får luft. Att klistra ihop dem gör sidan tätare än den behöver
vara — pris och gård är två olika saker och ska läsas som två. */
.card + .card {
margin-top: 1.5rem;
}
/* Där korten VERKLIGEN ska bilda en sammanhängande list — inkorgen — begärs det
uttryckligen i stället för att gälla överallt. */
.ft-stack > .card + .card {
margin-top: -1px;
}
.card-body {
padding: 1.5rem;
}
.card-header {
background: var(--ft-paper);
border-bottom: 1px solid var(--ft-rule);
font-family: var(--ft-mono);
font-size: .6875rem;
font-weight: 600;
letter-spacing: .12em;
text-transform: uppercase;
}
/* Avdelaren inne i ett kort är en hårlinje. Kortets egen ram bär strukturen;
en lika svart linje mitt i den konkurrerar med ramen. */
hr {
border-top: 1px solid var(--ft-hairline);
opacity: 1;
}
/* --- Knappar ----------------------------------------------------------- */
.btn {
font-family: var(--ft-mono);
font-size: .75rem;
font-weight: 600;
letter-spacing: .1em;
text-transform: uppercase;
border: 1px solid var(--ft-rule);
padding: .55rem 1.1rem;
transition: none; /* brutalism: ingen mjuk övergång */
}
.btn-lg { font-size: .8125rem; padding: .8rem 1.4rem; }
.btn-sm { font-size: .6875rem; padding: .35rem .7rem; }
/* Sajtens primära åtgärd: sök i hjälten, skicka förfrågan, publicera annons. */
.btn-success {
background: var(--ft-accent);
border-color: var(--ft-accent);
color: var(--ft-accent-ink);
}
.btn-success:hover,
.btn-success:focus {
background: var(--ft-ink);
border-color: var(--ft-ink);
color: var(--ft-paper);
}
.btn-dark { background: var(--ft-ink); border-color: var(--ft-ink); color: var(--ft-paper); }
.btn-outline-secondary,
.btn-outline-danger,
.btn-outline-light {
background: var(--ft-paper);
border-color: var(--ft-rule);
color: var(--ft-ink);
}
/* :focus var inte med förut, så tangentbordsfokus på t.ex. Logga ut i menyn
fick aldrig samma behandling som muspekaren. */
.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-light:hover,
.btn-outline-light:focus {
background: var(--ft-ink);
border-color: var(--ft-ink);
color: var(--ft-paper);
}
.btn-outline-danger { color: var(--ft-danger); border-color: var(--ft-danger); }
.btn-outline-danger:hover,
.btn-outline-danger:focus {
background: var(--ft-danger);
border-color: var(--ft-danger);
color: var(--ft-danger-ink);
}
.btn-danger {
background: var(--ft-danger);
border-color: var(--ft-danger);
color: var(--ft-danger-ink);
}
/* Bootstraps egna #198754 når 3,94:1 mot mörkt papper. Används av tomma
sökträffar, rollväljaren i registreringen och språkväxlaren. */
.btn-outline-success {
background: var(--ft-paper);
border-color: var(--ft-accent);
color: var(--ft-accent);
}
.btn-outline-success:hover,
.btn-outline-success:focus,
.btn-check:checked + .btn-outline-success {
background: var(--ft-accent);
border-color: var(--ft-accent);
color: var(--ft-accent-ink);
}
.btn:disabled,
.btn.disabled {
background: var(--ft-paper-alt);
border-color: var(--ft-rule);
color: var(--ft-muted);
opacity: 1;
}
/* --- Formulär ---------------------------------------------------------- */
.form-control,
.form-select {
border: 1px solid var(--ft-rule);
padding: .55rem .7rem;
font-family: var(--ft-grotesque);
background-color: var(--ft-paper);
}
/* Pilen i en