/* ========================================================================== tokens.css - enda källan för färg, mått, typografi och rytm. Spåre Knives demo v0.1. Regel: ingen annan fil får innehålla ett hexvärde, en px-baserad spacing eller en font-stack. Behövs ett nytt värde läggs det här först. ========================================================================== */ :root { /* --- Färg ------------------------------------------------------------- Två bakgrunder, beslutat 2026-09-18. Sidan har en ljus botten och en mörk andra yta, ingenting däremellan. Tidigare fanns fyra ytor, och den varma #FAECD6 läste som lax snarare än som en ton i familjen. Struket: #FAECD6 och #161311. Kvarvarande värden ur Peters palett räcker för hela sajten. */ --bg-main: #E6E3DD; /* sidans botten, den enda ljusa ytan */ --ink: #262320; /* den andra ytan: mörka sektioner och sidfot */ --surface: #BFBAB0; /* komponentyta, inte sektionsyta: platshållare och ifyllda fält. På mörk yta blir den text. */ /* FÖRSLAG 2026-09-21, inte beslutade. Samma varmgrå axel som --bg-main (nyans ca 40°, mättnad ca 15 %), bara annan ljushet. Öppnar frågan om mellanytor som stängdes 2026-09-18, så de används bara i admin tills Peter bestämt sig. Se design/palett-aktuell.html. */ --bg-light: #F0EEEA; /* förslag: ljusare yta bakom admintabeller */ --bg-band: #EAE7E1; /* förslag: varannan rad i admintabeller. Ligger mellan --bg-light och --bg-main, närmare den ljusa: bandningen ska hjälpa ögat följa en bred rad, inte läsas som två sorters rader. */ --bg-mid: #D6D1C6; /* förslag: mellanton mellan --bg-main och --border. Rubrikrad i admintabeller. */ --text: #2A2623; /* brödtext */ /* Adminens två statusfärger. Låg mättnad, samma varma axel som resten. Grön säger betald, brun säger väntar på åtgärd. De bär aldrig information ensamma: bredvid färgen står alltid ordet. */ /* Papper. Utskrifter har egna värden: skärmens varmgrå botten blir grå dimma i en skrivare, och sparar varken bläck eller läsbarhet. */ --paper-bg: #FFFFFF; --paper-ink: #111111; --paper-line: #999999; --paper-faint: #CCCCCC; --state-ok: #2F6B2B; /* tydligare grön 2026-09-30 på Peters begäran, var #3A5A37 som läste grågrön. Mäter 5,1:1 mot --bg-ok och 5,0:1 mot bottnen (--bg-main). */ --bg-ok: #DCE8D5; /* ljusgrön yta bakom en hel rad som betyder betald, till exempel betalningen i händelseloggen. Text i --state-ok på den mäter 5,1:1. */ --bg-warn: #F3E2D6; /* ljusorange yta bakom en hel rad som är ett problem, till exempel en dubbelbetalning i händelseloggen (Peter 2026-10-01). Text i --state-warn på den mäter 5,3:1. */ --bg-stopped: #EDC9C0; /* dämpad röd bakom en avbruten eller återbetald orderrad och de knappar som hör till den (Peter 2026-10-09, först rosabeige #E3DAD4, gjordes tydligare röd samma dag). Ljus nog att bära text, rödare än --bg-warn (orange). */ --fg-stopped: #6B2A1A; /* text på --bg-stopped. Mäter 7,0:1. */ --state-warn: #8A4B1F; --state-unsent: #A03A1E; /* "Ej skickad" i orderlistan, en ton rödare än --state-warn (Peter 2026-09-30). Samma ljushet, alltså samma kontrast: 5,2:1 mot bottnen. Ligger under --state-danger i styrka. */ --state-danger: #FF0000; /* TEST 2026-10-04, var #7E1B18. radering. Måste läsas som något annat än --state-warn, som bär utkast, saknad bild och alla felmeddelanden: mörkare och tydligt röd, men fortfarande dämpad */ --text-strong: #1F1F1F; /* rubriker */ /* Härledda. Linjer och sekundär text valda på samma varmgrå axel och kontrollerade mot WCAG. --fg-muted mäter 6,7:1 mot bottnen. */ --border: #C6BFB0; --line-strong: #B4AC9C; --fg-muted-derived: #4F4C46; /* Roller. Komponenter använder dessa, aldrig råfärgerna ovan. */ --bg-page: var(--bg-main); --bg-surface: var(--bg-main); /* ingen egen mellanyta längre */ --bg-fill: var(--surface); --bg-inverse: var(--ink); --bg-raised: var(--bg-light); /* förslag, bara admin än så länge */ /* REGEL (Peter 2026-10-02): varje ruta man skriver eller väljer i på den publika sajten har den här bakgrunden, den som customsidans fält har. Använd alltid --field-bg, aldrig --bg-page eller en egen färg, så att alla fält läses likadant. Gäller inte adminen. */ --field-bg: var(--bg-raised); --bg-table-head: var(--bg-mid); /* förslag, bara admin än så länge */ --bg-row-alt: var(--bg-band); /* förslag, bara admin än så länge */ --bg-selected: var(--bg-mid); /* förslag: vald flik i admin */ --fg-default: var(--text); --fg-muted: var(--fg-muted-derived); --fg-strong: var(--text-strong); --fg-inverse: var(--bg-main); --fg-ok: var(--state-ok); --fg-warn: var(--state-warn); --fg-unsent: var(--state-unsent); --fg-danger: var(--state-danger); --fg-decor: #A9A49A; /* Scenen "The blade" på startsidan (assets/css/blade.css). Samma svart som b.devkit.se:s Forge-demo, där effekten kommer ifrån. Fotot har neutralt svart botten, och --ink är för varm för att smälta in med det. Lagt till 2026-09-29. */ --scene-black: #0D0D0C; --line: var(--border); --focus-ring: var(--ink); /* --- Typografi -------------------------------------------------------- Libre Franklin: grotesk med tidningsrötter. Bär wordmark, navigation, rubriker, etiketter och hela admin. Source Serif 4: löpande text i editoriella partier. Serif på mörk yta läser lugnare än sans och drar sidan mot hantverk snarare än e-handel. TODO: typsnitten laddas från Google Fonts i demon. Inför produktion ska de självhostas - dels GDPR, dels laddtid. */ --font-display: "Libre Franklin", "Helvetica Neue", Arial, sans-serif; --font-body: "Source Serif 4", Georgia, "Times New Roman", serif; --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; /* Skala. Fluid mellan 360px och 1440px via clamp, steg ca 1.25. --text-0 är brödtext och referenspunkten för allt annat. */ --text-2xs: 0.6875rem; /* 11px, etiketter */ --text-xs: 0.75rem; /* 12px */ --text-table: 0.8125rem; /* 13px, admintabeller */ --text-sm: 0.875rem; /* 14px */ --text-0: 1.0625rem; /* 17px, brödtext */ --text-1: clamp(1.1875rem, 0.30vw + 1.12rem, 1.375rem); --text-2: clamp(1.375rem, 0.65vw + 1.22rem, 1.75rem); --text-3: clamp(1.625rem, 1.15vw + 1.36rem, 2.375rem); --text-4: clamp(2rem, 2.10vw + 1.51rem, 3.25rem); --text-5: clamp(2.5rem, 3.60vw + 1.66rem, 4.5rem); /* hero */ --leading-tight: 1.1; --leading-snug: 1.25; --leading-normal: 1.55; --leading-loose: 1.7; --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.06em; --tracking-caps: 0.12em; /* versaletiketter, t.ex. AVAILABLE */ --weight-normal: 400; --weight-medium: 500; --weight-semi: 600; /* --- Rytm ------------------------------------------------------------- 4px-bas. Sektionsavstånden är fluida så att mobilen inte blir gles. */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4rem; --space-9: 6rem; --space-10: 8rem; --section-y: clamp(var(--space-7), 6vw, var(--space-9)); --section-y-large: clamp(var(--space-8), 9vw, var(--space-10)); --gutter: clamp(var(--space-4), 4vw, var(--space-7)); /* --- Mått -------------------------------------------------------------- */ --container-max: 1320px; /* satt i handovern */ --content-max: 760px; /* satt i handovern, smal textkolumn */ --measure: 68ch; /* max radlängd för löptext */ --header-h: 64px; --header-h-lg: 76px; --radius: 2px; /* nästan skarpt. Rundade hörn läser mjukt */ --radius-md: 4px; --border-w: 1px; /* --- Rörelse ---------------------------------------------------------- Sparsamt. Handovern förbjuder onödiga animationer. */ --ease: cubic-bezier(0.2, 0, 0.2, 1); --dur-fast: 120ms; --dur: 200ms; /* --- Lager ------------------------------------------------------------- */ --z-header: 100; --z-menu: 200; --z-skip: 300; }