/* ============================================================ SALONGSMALLEN — tokenkontraktet ------------------------------------------------------------ Det HÄR är temalagret. En ny kund byter tema genom att byta en enda rad i — inte genom att skriva ny CSS. Bygger du en sektion och behöver en färg som inte finns här: lägg till den som token, hårdkoda den aldrig. Tokens delas i två: 1. Temade — definieras i css/teman/*.css, en fil per tema 2. Fasta — rytm, skala, tid. Samma för alla teman. Här nere. Se ART-DIRECTION.md för varför värdena ser ut som de gör. ============================================================ */ :root { /* -------------------------------------------------------- TEMADE TOKENS — kontraktet. Värdena här är bara fallback så att en sida utan data-tema inte blir trasig; teman- filerna skriver över allihop. -------------------------------------------------------- */ /* Ytor, tre nivåer: --paper sidans grundton --paper-alt näst intill samma ton, en aning djupare. Bryter av mellan sektioner utan att skrika. --surface den mörka sektionen. Ett par gånger per sida — citat, statistik, sidfot. Det är växlingen ljus → mörk → ljus som ger sidan rytm. */ --paper: #f4efe9; --paper-alt: #ebe3d9; --ink: #101012; --ink-soft: rgba(16, 16, 18, 0.66); --surface: #141416; --surface-ink: #ece4d9; --surface-soft: rgba(236, 228, 217, 0.60); /* Accent. EN accent per sajt. Två accenter gör den billig. --accent-on-dark är samma färg ljusare, för AA på --surface. */ --accent: #b0824f; --accent-on-dark: #d9b98a; --accent-ink: #ffffff; /* text ovanpå accentfärgad yta */ /* Accenten OVANPÅ FOTO. Ett foto med hero-skugga är alltid en mörk yta — även när sidan är i ljust läge. --accent-on-dark följer läget och pekar i ljust läge på den mörka accenttonen, vilket gav svart ögonbryn på ett mörkt foto i monokrom. Den här pekar alltid på tonen som är avstämd mot mörkt. */ --accent-foto: #d9b98a; /* Linjer. Alltid 1px, alltid låg opacitet. Aldrig grå boxar. */ --line: rgba(16, 16, 18, 0.14); --line-on-dark: rgba(236, 228, 217, 0.16); /* Typsnitt, tre roller. Fler än tre gör sidan rörig. */ --font-display: 'Italiana', Georgia, serif; --font-body: 'Schibsted Grotesk', -apple-system, sans-serif; --font-script: 'Parisienne', cursive; /* Displayens finjustering — skiljer sig kraftigt mellan typsnitt, därför är de tokens och inte hårdkodade. */ --display-case: uppercase; --display-tracking: 0.06em; --display-weight: 400; --display-leading: 1.06; /* -------------------------------------------------------- FASTA TOKENS — rytm och skala. Rör inte per kund. -------------------------------------------------------- */ /* Vertikal rytm. Referenssajterna andas 120–160px mellan sektioner. Det är den enskilt största skillnaden mot en AI-byggd sida, som nästan alltid landar på 48–64px. */ --section-y: clamp(4.5rem, 9vw, 10rem); --section-y-tight: clamp(3rem, 6vw, 6rem); --gutter: clamp(1.25rem, 4vw, 3rem); --measure: 68ch; /* max radlängd för brödtext */ --page: 1360px; /* maxbredd på innehållet */ /* Typskala, flytande. Display hoppar medvetet långt från brödtexten — kontrasten ÄR hierarkin. Mellanstorlekar saknas med flit. */ --t-display: clamp(2.75rem, 7.5vw, 6rem); --t-h2: clamp(1.9rem, 3.6vw, 3.1rem); --t-h3: clamp(1.15rem, 1.6vw, 1.45rem); --t-body: clamp(1rem, 1.05vw, 1.0625rem); --t-small: 0.875rem; --t-label: 0.6875rem; /* versaler + spärrning nedan */ --t-script: clamp(1.75rem, 3.4vw, 2.75rem); /* Etiketter i versaler. Spärrningen är hela effekten — under 0.3em ser det bara ut som glömda versaler. */ --label-tracking: 0.38em; --body-leading: 1.65; /* Rörelse. Kort och få. Respektera prefers-reduced-motion. */ --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --t-fast: 160ms; --t-slow: 420ms; /* Radie. Nära noll med flit — se ART-DIRECTION.md. Rundade kort är den tydligaste AI-signaturen som finns. */ --radius: 0; --radius-pill: 999px; /* endast piller-knappar och taggar */ } @media (prefers-reduced-motion: reduce) { :root { --t-fast: 0ms; --t-slow: 0ms; } } /* ============================================================ LÄGESVÄXLINGEN — ljust och mörkt på SAMMA tema ------------------------------------------------------------ Ur referenser/SYNTES.md: haires kör en enda palett i tre lägen — mörkt, ljust varmt, ljust svalt — med accenten oförändrad. Bara papper och bläck vänder plats. Våra första sex teman var sex separata identiteter. Det här ger dubbelt så många utseenden för sex värden, och två sajter i samma tema men olika läge läser som olika sajter. Ett tema som stöder växlingen definierar SEX toner: --ton-mork mörka ytan --ton-mork-alt mörka ytan, en aning djupare --ton-ljus ljusa ytan --ton-ljus-alt ljusa ytan, en aning djupare --accent-pa-mork accent avstämd mot den mörka ytan --accent-pa-ljus accent avstämd mot den ljusa ytan --accent-ink-mork textfärg på accentfylld yta i mörkt läge --accent-ink-ljus textfärg på accentfylld yta i ljust läge De två sista är lätta att glömma och syns bara som en oläslig knapp. Barbers guld tar SVART text (7.2:1), men den mörkare guldtonen som används i ljust läge kräver VIT. Samma tema, två svar — därför är de två tokens och inte ett. Resten härleds nedan. --ink-soft, --line och deras motsvarigheter räknas fram med color-mix i stället för att underhållas för hand — det är sex värden per tema i stället för tolv, och de kan inte glida isär. Teman utan de sex tonerna påverkas inte; de sätter sina tokens direkt som förut. ============================================================ */ [data-lage="mork"] { --paper: var(--ton-mork); --paper-alt: var(--ton-mork-alt); --ink: var(--ton-ljus); --surface: var(--ton-ljus); --surface-ink: var(--ton-mork); --accent: var(--accent-pa-mork); --accent-on-dark: var(--accent-pa-ljus); --accent-ink: var(--accent-ink-mork); } [data-lage="ljus"] { --paper: var(--ton-ljus); --paper-alt: var(--ton-ljus-alt); --ink: var(--ton-mork); --surface: var(--ton-mork); --surface-ink: var(--ton-ljus); --accent: var(--accent-pa-ljus); --accent-on-dark: var(--accent-pa-mork); --accent-ink: var(--accent-ink-ljus); } /* Härledda i båda lägena. 62 % ger dämpad brödtext som fortfarande klarar AA; 14 % ger en linje som syns utan att rita en ruta. OBS för temaförfattare: ett tema får ALDRIG sätta --accent-ink i sitt huvudblock. Den har samma specificitet som [data-lage] men laddas senare och vinner då alltid — resultatet blir en knapp med ljus text på ljus fyllning i ena läget. Lägg reserven i temats :where()-block i stället. */ /* Foto är mörkt i BÅDA lägena — därför samma värde i båda. Det är inte en miss, det är hela poängen med token. */ [data-lage="mork"], [data-lage="ljus"] { --accent-foto: var(--accent-pa-mork); } [data-lage] { --ink-soft: color-mix(in srgb, var(--ink) 62%, var(--paper)); --surface-soft: color-mix(in srgb, var(--surface-ink) 62%, var(--surface)); --line: color-mix(in srgb, var(--ink) 14%, transparent); --line-on-dark: color-mix(in srgb, var(--surface-ink) 15%, transparent); }