/* ========================================================= CELEBRITIES ASSISTANT, DESIGNTOKENS ========================================================= Palett beslutad 2026-08-24. Fullt underlag i docs/DESIGN-DECISIONS.md. KORTVERSIONEN AV VARFOR: 1. KULOREN STANNAR I ROSA-FAMILJEN. Sju konkurrenter mattes i sin egen live-CSS. Fyra leder med blatt, en med lila, tva med rott, noll med rosa. Att bli den femte bla sajten koper ingen tillit, det gor bara att kunden tvingas jamfora pa pris. 2. MATTNADEN SANKS FRAN S65 TILL S42. Skulmowski m.fl. 2016 i Computers in Human Behavior: avmattade sajter far hogre betyg pa trovardighet, tilltalande och upplevd anvandbarhet an mattade. Konkurrenterna ligger pa S79 till S100. 3. LJUSHETEN AR URAKNAD, INTE VALD. For varje par hittades den LJUSASTE nyans som fortfarande nar sitt WCAG-mal. Det ger mest kulor utan att bryta kontrastkravet. Andra inte ljushetsvardena utan att rakna om kontrasten. 4. DET GAMLA PRIMARA ROSA VAR UNDERKANT. Vit text pa #D74273 mater 4.27:1. Kravet ar 4.5:1. Sajtens viktigaste element klarade inte projektets eget krav. Nya --ca-brand mater 5.13:1. NAMING: tokens are SEMANTIC, not colour names. The predecessor had --ca-bla ("blue"), which worked until the palette changed and the variable was still called "blue" while being pink. The old names remain at the bottom as deprecated aliases so nothing breaks, but new work should use the semantic ones. --------------------------------------------------------- ASTRA IS THE SOURCE OF TRUTH, THIS FILE DERIVES FROM IT --------------------------------------------------------- Every colour and the typeface below reads var(--ast-global-color-N) with the hex as a fallback. That is deliberate and it was a mistake not to do it from the start. With the palette living only here, three things were broken: 1. Astra's own components (links, borders, site background) stayed on the theme default blue, #046bd2. 2. The colour picker in Gutenberg offered Astra's blue palette, so anything the client formatted themselves came out the wrong colour. That is exactly the editability we promised. 3. The client could not change a colour without us editing CSS, which was the whole reason for building on WordPress. Now the palette is set under Appearance > Customize > Colors, and this file follows it. Change the brand colour there and the buttons, sections, profile check and product cards all follow. The hex fallbacks are not decoration: they keep the page correct if the theme is ever swapped, and they document what the value should be. Slot numbering is Astra's, see scripts/setup/astra_palett.php. ========================================================= */ :root { /* ---- Surfaces ---- ground and white come from Astra. The three tinted surfaces do not: Astra has nine slots and no room for a tint scale, and these are derived from the brand hue rather than chosen independently. They stay literal, and they are the values to recalculate if the brand colour ever changes materially. */ --ca-ground: var(--ast-global-color-5, #FAF7F6); /* page background */ --ca-white: var(--ast-global-color-4, #FFFFFF); --ca-surface: #F1EBE9; /* cards and panels */ --ca-surface-2: #F4E9EF; /* tinted surface, e.g. the proof box */ --ca-surface-3: #EDDDE6; /* same surface, hover and focus */ --ca-line: var(--ast-global-color-7, #E0D7DB); /* rules and borders */ /* ---- Text ---- */ --ca-ink: var(--ast-global-color-2, #1F141A); /* body and headings, 16.79:1 */ /* Measured against the DARKEST surface it can land on, not against the page background. The first attempt, #816A77, passed on ground at 4.62 but fell to 4.18 on the card surface, so it failed exactly where it is used most. The contrast check caught it. */ --ca-ink-dampad: var(--ast-global-color-8, #735E6A); /* 6.09:1 ground, 4.55:1 surface-3 */ --ca-ink-invers: var(--ast-global-color-4, #FFFFFF); /* ---- Brand ---- brand-deep carries large dark areas: header, footer, dark sections. It is what makes the impression read as established rather than promotional, and it was missing entirely from the predecessor. brand carries the primary button. Keep them apart. Used on a large area, brand becomes a slab of pink, which is precisely what the report says not to do. */ --ca-brand-deep: var(--ast-global-color-6, #43192E); /* white text: 14.82:1 */ --ca-brand: var(--ast-global-color-0, #B1487D); /* white text: 5.13:1 */ --ca-brand-stark: var(--ast-global-color-1, #8D3A63); /* hover, and body links: 6.75:1 */ --ca-accent: #B2536F; /* small accents, icons, figures: 4.52:1 */ /* ---- Brass ---- The premium signal. Sparingly: a thin rule, a figure, an icon. NEVER as a gold gradient, which is this category's most worn-out move. Not in Astra's nine slots, so it stays literal. */ --ca-brass: #896D43; /* 4.55:1 against ground */ /* ---- Status ---- Semantic colours, deliberately separate from the brand hue. They must not be repurposed as accents. */ --ca-fel: #A32B22; --ca-ok: #1E6B40; /* ---- Colour of the day ---- See assets/js/dagsfarg.js and inc/dagsfarg.php. The default is the brand colour, so the page looks right even if the JavaScript never runs. */ --ca-dag: var(--ca-brand); /* ---- Typography ---- Set under Appearance > Customize > Typography, and read from Astra's own body font variable here. MUST cover both Thai and Latin. Source Sans 3, inherited from the predecessor, has no Thai coverage at all, and for a while this file asked for IBM Plex Sans Thai while fonts.css served Source Sans 3 and assets/fonts/ was empty. Three 404s per page view, and the site rendered in a system fallback. The files are now self-hosted, latin and thai subsets, weights 400/600/700. See scripts/setup/hamta_typsnitt.py. The fallback stack degrades sensibly: Noto Sans Thai, then Leelawadee UI and Tahoma, which ship with Windows and most systems with Thai support respectively. */ --ca-font: var(--ast-body-font-family, "IBM Plex Sans Thai", "Noto Sans Thai", "Leelawadee UI", Tahoma, system-ui, -apple-system, sans-serif); --ca-font-rubrik: var(--ca-font); /* Fluid type scale, for the designed sections. Astra's own H1 to H6 sizes govern Gutenberg content and anything the client writes; these clamp values govern the hero and section system, where a fixed size per breakpoint is not good enough. The two are aligned: Astra's desktop H1 of 3rem sits inside this scale's --ca-text-4xl range. */ --ca-text-xs: 0.875rem; --ca-text-sm: 1rem; --ca-text-bas: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); --ca-text-lg: clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem); --ca-text-xl: clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem); --ca-text-2xl: clamp(1.5rem, 1.25rem + 1.1vw, 2rem); --ca-text-3xl: clamp(1.875rem, 1.4rem + 2vw, 2.75rem); --ca-text-4xl: clamp(2.25rem, 1.6rem + 2.8vw, 3.5rem); --ca-radhojd: 1.65; --ca-radhojd-rubrik: 1.15; --ca-radlangd: 68ch; /* Lasbredd for textsidor. OBS varfor rem och inte ch: ch raknas mot elementets EGEN fontstorlek. Pa en H1 i 56 px blir 72ch nastan 1900 px, alltsa full bredd, medan samma regel pa brodtext ger 600 px. Rubriken hamnade darfor langt till vanster om innehallet under den. rem ar oberoende av elementets fontstorlek och haller ihop spalten. */ --ca-lasbredd: 46rem; /* ---- Mellanrum ---- */ --ca-rum-1: 0.25rem; --ca-rum-2: 0.5rem; --ca-rum-3: 0.75rem; --ca-rum-4: 1rem; --ca-rum-5: 1.25rem; --ca-rum-6: 1.5rem; --ca-rum-7: 1.75rem; --ca-rum-8: 2rem; /* 7 och 10 SAKNADES OCH ANVANDES ANDA. Atta regler i fyra filer refererade dem. En CSS-variabel som inte finns gor HELA deklarationen ogiltig, sa koprutans padding berakades till 0 och rutorna lag dikt an panelens kant. Det syntes inte i nagon lint och inte i granskningsskriptet, bara som "det ser konstigt ut". Uppmatt 2026-08-25. */ --ca-rum-10: 2.5rem; --ca-rum-12: 3rem; --ca-rum-16: 4rem; --ca-rum-20: 5rem; --ca-sektion: clamp(3rem, 2rem + 5vw, 6rem); /* ---- Form ---- */ --ca-radie: 6px; --ca-radie-stor: 10px; --ca-skugga: 0 1px 2px rgba(31, 20, 26, 0.05), 0 8px 24px -16px rgba(31, 20, 26, 0.25); /* ---- Layout ---- */ --ca-bredd: 1200px; --ca-marginal: max(1.25rem, (100vw - var(--ca-bredd)) / 2); /* ---- Tap targets, WCAG 2.2 AA ---- */ --ca-traffyta: 48px; /* ===================================================== UTFASADE ALIAS ===================================================== Forlagans fargnamn. Finns kvar sa att befintlig CSS inte slutar fungera, men anvand INTE dem i nytt arbete. --ca-bla pekar pa --ca-brand, alltsa knappfargen, eftersom det ar den vanligaste anvandningen. De fa stallen dar den bar en stor mork yta (sidhuvud, sidfot, mobilmeny) ar omskrivna till --ca-brand-deep direkt i sina filer. */ --ca-bla: var(--ca-brand); --ca-bla-mork: var(--ca-brand-stark); --ca-bla-ljus: var(--ca-surface-2); --ca-bla-ljus-2: var(--ca-surface-3); --ca-vit: var(--ca-white); --ca-varm: var(--ca-surface); --ca-kant: var(--ca-line); --ca-text: var(--ca-ink); --ca-text-dampad: var(--ca-ink-dampad); --ca-text-invers: var(--ca-ink-invers); --ca-gul: var(--ca-brass); --ca-ockra: var(--ca-brass); } /* ========================================================= DAGENS FARG, de sju thailandska veckodagsfargerna ========================================================= Kuloren ar kulturellt korrekt och rors inte: sondag rott, mandag gult, tisdag rosa, onsdag gront, torsdag orange, fredag blatt, lordag lila. MATTNAD OCH LJUSHET AR DAREMOT NORMALISERADE till S42 och till den ljushet som ger minst 4.5:1 mot --ca-ground. Skalet ar tva: 1. De kanoniska dagsfargerna ar klara och skrikiga. Gult och orange kan overhuvudtaget inte bara vit text i sin rena form. 2. Utan normalisering skulle mandagen skrika och onsdagen viska. Nu ligger alla sju pa luminans 0.1605 till 0.1674, alltsa praktiskt taget identisk visuell tyngd. Notera att tisdagens #B54A77 i praktiken ar varumarkesfargen #B1487D. Foretagets egen dag ar tisdag. ========================================================= */ [data-thai-day="sun"] { --ca-dag: #B85151; } /* rott 4.55:1 */ [data-thai-day="mon"] { --ca-dag: #7F7034; } /* gult 4.61:1 */ [data-thai-day="tue"] { --ca-dag: #B54A77; } /* rosa 4.68:1 */ [data-thai-day="wed"] { --ca-dag: #347F4D; } /* gront 4.59:1 */ [data-thai-day="thu"] { --ca-dag: #94663D; } /* orange 4.66:1 */ [data-thai-day="fri"] { --ca-dag: #4475A7; } /* blatt 4.53:1 */ [data-thai-day="sat"] { --ca-dag: #9258BB; } /* lila 4.54:1 */ /* Respektera anvandarens installning. Ingen animation far fordroja telefonnummer, sokning eller formular. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }