/* * Tema (skin) — luffarmuseum · designsystem "modern" * Allt som skiljer ett tema från ett annat bor här: färg, storlek, marginal, typsnitt. * Base/layout/components (site.css) refererar ENBART var(--*) — ingen hårdkodad hex. * Byt tema = ny theme..css + appsetting Site:Theme. * * Tes: nästan monokromt, luftigt och redaktionellt (à la Vandalorum), med EN varm * glödaccent (eld/rost/tenn) som nick till luffararvet. Mörka sektioner via .inverse. */ :root { /* ---- Neutraler (bas) ---- */ --paper: #F5F3EC; /* gallerivägg, varm benvit — sidbakgrund */ --paper-2: #ECE9DF; /* alternerande/indragen sektion */ --paper-3: #E1DDCF; /* bildplatshållare, djupare panel */ --surface: #FBFAF5; /* upphöjd yta (kort, fält) */ --ink: #191714; /* varmt nästan-svart — text & mörk yta */ --ink-2: #423E37; /* sekundär text */ --ink-soft: #625D53; /* dämpad text, etiketter — 4.81:1 mot djupaste pappret (WCAG 1.4.3) */ --line: #D8D3C6; /* hårlinje */ --line-strong: #B8B1A0; /* tydligare linje/ram — dekorativ, inget kontrastkrav */ --line-control: #847F72; /* ram runt formulärkontroller — 3.29:1 mot fält och sektion (WCAG 1.4.11) */ /* ---- Varm accent: glöd (luffare: eld, rost, tenn) ---- */ --ember: #B4512B; /* accentfyllning, markörer */ --ember-deep: #8E3C1E; /* text/länk på ljust — AA */ --ember-bright: #D9743F; /* accent på mörk botten */ --ember-wash: #EFE1D4; /* svag ton, hover-fyllning */ /* ---- Ytor som alltid ligger mörkt, oberoende av tema (bild-scrim, lightbox, mörk panel) ---- */ --on-scrim: #F5F3EC; /* ljus text på scrim/bild */ --on-scrim-2: rgba(245, 243, 236, 0.92); /* något dämpad ljus text */ --on-scrim-muted: rgba(245, 243, 236, 0.82); /* etikett/eyebrow på scrim */ --on-scrim-faint: rgba(245, 243, 236, 0.5); /* platshållartext på mörk yta */ --media-shade: #2B2620; /* mörk platshållare bakom hero */ --ink-text-2: #C9C3B5; /* sekundär text på mörk yta */ --ink-text-muted: #9C9587; /* dämpad text på mörk yta */ /* ---- Semantiska roller (ljust tema, standard) ---- */ --bg: var(--paper); --bg-alt: var(--paper-2); --bg-media: var(--paper-3); --text: var(--ink); --text-2: var(--ink-2); --text-muted: var(--ink-soft); --text-accent: var(--ember-deep); --border: var(--line); --border-strong: var(--line-strong); --border-control:var(--line-control); --accent: var(--ember); --accent-deep: var(--ember-deep); --accent-ink: #FFFFFF; /* text ovanpå accentfyllning */ --focus: var(--ember); --ok: #3F6B3A; /* bekräftelse (grön) */ --warn: var(--ember-deep); /* Länkfärger */ --link: var(--ember-deep); --link-hover: var(--ink); /* ---- Typografi: familjer ---- */ --font-display: "Instrument Serif", "Times New Roman", Georgia, serif; --font-sans: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif; --font-mono: "Space Mono", ui-monospace, "SFMono-Regular", Consolas, monospace; /* ---- Typografi: flytande skala (min → max) ---- */ --text-2xs: clamp(0.72rem, 0.70rem + 0.10vw, 0.78rem); --text-xs: clamp(0.80rem, 0.77rem + 0.15vw, 0.88rem); --text-sm: clamp(0.92rem, 0.88rem + 0.20vw, 1.02rem); --text-base: clamp(1.02rem, 0.97rem + 0.30vw, 1.18rem); --text-md: clamp(1.20rem, 1.08rem + 0.55vw, 1.55rem); --text-lg: clamp(1.55rem, 1.28rem + 1.20vw, 2.35rem); --text-xl: clamp(2.00rem, 1.55rem + 2.10vw, 3.40rem); --text-2xl: clamp(2.60rem, 1.80rem + 3.70vw, 5.20rem); --text-3xl: clamp(3.20rem, 1.90rem + 6.00vw, 7.20rem); --text-display: clamp(3.60rem, 1.60rem + 8.50vw, 9.50rem); /* ---- Rollbaserade grader: justeras här utan att röra skalan ovan ---- */ --text-page-title: var(--text-xl); /* h1 på inre sidor (masthead) */ /* ---- Radhöjd ---- */ --leading-solid: 0.95; --leading-tight: 1.04; --leading-snug: 1.18; --leading-normal: 1.45; --leading-relaxed: 1.62; /* ---- Spårning ---- */ --tracking-label: 0.16em; --tracking-tight: -0.015em; --tracking-normal: 0em; /* ---- Vikter (Instrument Serif finns bara i 400) ---- */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* ---- Rum & rytm (4px-bas, generös luft) ---- */ --space-3xs: 0.25rem; --space-2xs: 0.5rem; --space-xs: 0.75rem; --space-sm: 1rem; --space-md: 1.5rem; --space-lg: 2.5rem; --space-xl: 4rem; --space-2xl: 6.5rem; --space-3xl: 9.5rem; --space-4xl: 13rem; --gutter: clamp(1.25rem, 5vw, 4.5rem); --maxwidth: 96rem; /* brett redaktionellt raster */ --maxwidth-wide: 108rem; /* bildrutnät som får andas bredare än textspalten */ --maxwidth-narrow: 52rem; /* löptext */ --maxwidth-figure: 48rem; /* bild i brödflödet — får inte svälla ut till hela rastret */ --maxwidth-figure-narrow: 32rem; /* smalt bildläge: detaljer, porträtt, stående motiv */ --maxheight-figure: 80svh; /* stående bilder ska inte äta hela skärmhöjden */ --measure: 72ch; /* läsbar radlängd */ --header-h: 4.75rem; /* ---- Effekter: hörn, linjer, skugga, rörelse ---- */ --radius: 0px; /* raka hörn = det moderna avtrycket */ --radius-sm: 2px; /* fält, taggar */ --hair: 1px; --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-out: cubic-bezier(0.16, 1, 0.30, 1); --dur: 0.25s; --dur-slow: 0.5s; /* Skuggor används sparsamt — mest hårlinjer. */ --shadow-card: 0 1px 2px rgba(25, 23, 20, 0.04), 0 14px 34px rgba(25, 23, 20, 0.07); --shadow-lift: 0 22px 50px rgba(25, 23, 20, 0.14); } /* ---- Inverterat (mörkt) — sidfot, feature-sektioner, "montrar", felsidor ---- */ .inverse { --bg: #17140F; --bg-alt: #201C15; --bg-media: #262119; --surface: #211D16; --text: var(--paper); --text-2: var(--ink-text-2); --text-muted: var(--ink-text-muted); --text-accent: var(--ember-bright); --border: #34302A; --border-strong: #4B463C; --border-control:#736C5D; /* ≥3:1 mot mörka ytor (WCAG 1.4.11) */ --accent: var(--ember-bright); --accent-deep: var(--ember-bright); --accent-ink: #17140F; --focus: var(--ember-bright); --ok: #6FA863; --link: var(--ember-bright); --link-hover: var(--paper); background: var(--bg); color: var(--text); }