/* ========================================================================== flowering.dk — My Account redesign tokens.css — the single source of truth for all design tokens. Rules (see CLAUDE.md §4.6 / §9): - Every visual constant lives here as a CSS custom property on :root. - account.css must consume ONLY these variables — no raw hex/px in account.css. - No build step. Edit values directly; everything is diffable. Values were color-picked from Flowering.dk+redesign.pdf (Canva export, 1152×768pt artboard, rendered @110dpi and pixel-sampled). Each token notes [measured] or [estimate]. Estimates (radii, shadows, some sizes) will be pixel-verified against the PDF during Phase 1. PolySans is the design font — see TYPOGRAPHY note. ========================================================================== */ :root { /* ---------------------------------------------------------------------- COLOR — neutrals & surfaces The page is a near-neutral light; warmth comes from the cream surfaces, the blush accent and the sage badge — not from the background itself. ---------------------------------------------------------------------- */ --fl-bg: #F9F8F8; /* [measured] page background (gutter, 83% pure) */ --fl-surface: #FFFFFF; /* [measured ~#FEFEFE] white cards */ --fl-surface-warm: #F7F4F1; /* [measured] cream soft-cards / strips / hero panel */ --fl-sidebar: #FDFBF9; /* [measured #FFFBF9] left sidebar background */ --fl-nav-active: #F4EDE3; /* [measured] active nav pill (desktop sidebar) */ /* COLOR — brand accent (blush / peach) */ --fl-accent: #EEE4DC; /* [measured] accent buttons + highlights (e.g. "Opdater") */ --fl-accent-hover: #E6D8CB; /* [estimate] pressed/hover of --fl-accent */ --fl-accent-tint: #F9F3EF; /* [measured] very soft blush (modal current-selection bg) */ --fl-clay: #C7B29A; /* [estimate] decorative tan — "Vidste du det?" / help-footer leaf */ --fl-cal-green: #4F7A52; /* [estimate] calendar delivery dot (p5) — verify vs PDF */ --fl-danger-bg: #FBEAE8; /* [added] inline error strip bg (not in the design) */ --fl-danger-ink: #8A2A1E; /* [added] inline error strip text */ /* COLOR — ink (text) */ --fl-ink: #1A1A1A; /* [measured #15191D/#18181E] primary near-black text */ --fl-ink-2: #6B6C6E; /* [measured] secondary grey text (meta, labels) */ --fl-ink-3: #9A9B9D; /* [measured] muted grey (captions, input placeholders)*/ /* COLOR — primary (dark) action */ --fl-primary: #2C2D2D; /* [measured] dark charcoal button bg (NOT green) */ --fl-primary-ink: #FFFFFF; /* text/icon on --fl-primary */ --fl-primary-hover: #1E1F1F; /* [estimate] pressed/hover of --fl-primary */ /* COLOR — status: "Aktiv" badge (muted sage — desaturated, not a vivid green) */ --fl-success-bg: #EFF0E6; /* [measured #F0F0E7] pale sage badge background */ --fl-success-ink: #46493B; /* [measured ~#4E504A] muted dark-sage badge text */ /* COLOR — lines & overlays */ --fl-border: #ECE7E1; /* [measured] warm hairline (cards, inputs, dividers) */ --fl-border-strong: #DFD6CD; /* [measured] deeper hairline / icon-circle outline */ --fl-ring: rgba(44, 45, 45, .35); /* keyboard focus ring (from --fl-primary)*/ --fl-scrim: rgba(20, 20, 20, .40); /* [measured ~0.4 black] modal overlay */ /* NOTE: red text in the PDF (#F8485E) is the designer's flow annotation — NOT UI. It is deliberately omitted from the palette. */ /* ---------------------------------------------------------------------- ELEVATION — soft, low-opacity shadows for the airy look [estimate] ---------------------------------------------------------------------- */ --fl-shadow-xs: 0 1px 2px rgba(26, 26, 24, .04); --fl-shadow-sm: 0 2px 8px rgba(26, 26, 24, .05); --fl-shadow: 0 6px 20px rgba(26, 26, 24, .06); --fl-shadow-lg: 0 18px 48px rgba(26, 26, 24, .12); /* modals / day popover */ /* ---------------------------------------------------------------------- RADIUS [estimate — verify in Phase 1] ---------------------------------------------------------------------- */ --fl-radius-xs: 8px; --fl-radius-sm: 10px; /* buttons, inputs, chips */ --fl-radius: 10px; /* standard cards */ --fl-radius-lg: 12px; /* large cards */ --fl-radius-xl: 16px; /* hero panel, modals */ --fl-radius-pill: 999px; /* badges, tabs, nav segments */ /* ---------------------------------------------------------------------- TYPOGRAPHY Design font = PolySans (Gradient Foundry, commercial): PolySans-Neutral for body/UI, PolySans-Bulky for headings. VERIFIED on staging (2026-06-04): flowering.dk already self-hosts PolySans Neutral as an Elementor custom font (family name "PolySansNeutral", /wp-content/uploads/2021/11/PolySans-Neutral.woff2) — so the brand is licensed for it. PolySans Bulky (the headings cut) is that family's weight 700 (fonts.css, as the site's Elementor font does; client 2026-10-13), so headings use the same family at --fl-fw-bold. Staging assets sit behind basic-auth, so the prototype ships the Hanken Grotesk fallback until the PolySans .woff2 files are dropped in assets/fonts/. The "flowering" logotype is the black "Sort logo" wordmark on staging (Media IDs 254824 PNG / 258089 SVG) — an image asset, never a web font. // TODO: drop PolySans .woff2 into assets/fonts/ to swap off the Hanken fallback. ---------------------------------------------------------------------- */ --fl-font-sans: "PolySansNeutral", "PolySans Neutral", "PolySans", "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --fl-font-heading: "PolySansNeutral", "PolySans", "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; /* + --fl-fw-bold = PolySans Bulky */ --fl-fw-regular: 400; --fl-fw-medium: 500; --fl-fw-bold: 700; /* = PolySans Bulky (fonts.css) / Hanken 700 */ /* Type scale — px values are artboard-faithful (1152px design width). [measured/derived] */ --fl-text-2xs: 11px; /* eyebrow / uppercase caps (e.g. "NÆSTE LEVERING") */ --fl-text-xs: 12px; /* captions */ --fl-text-sm: 13px; /* meta rows, badge text */ --fl-text-base: 15px; /* body */ --fl-text-md: 17px; /* emphasised body / small headings */ --fl-text-lg: 20px; /* section titles */ --fl-text-xl: 24px; /* card titles ("Classic") */ --fl-text-2xl: 28px; /* page H1 */ --fl-text-3xl: 38px; /* hero date ("Fredag den 24. maj") */ --fl-lh-tight: 1.1; --fl-lh-snug: 1.25; --fl-lh-normal: 1.5; --fl-ls-caps: .08em; /* uppercase eyebrow tracking */ --fl-ls-tight: -.01em; /* large headings */ /* ---------------------------------------------------------------------- SPACING — 4px base scale ---------------------------------------------------------------------- */ --fl-space-1: 4px; --fl-space-2: 8px; --fl-space-3: 12px; --fl-space-4: 16px; --fl-space-5: 20px; --fl-space-6: 24px; --fl-space-8: 32px; --fl-space-10: 40px; --fl-space-12: 48px; --fl-space-16: 64px; /* ---------------------------------------------------------------------- LAYOUT [estimate — verify in Phase 1] ---------------------------------------------------------------------- */ --fl-canvas-max: 1536px;/* PDF artboard: 256 rail + 1280 content; canvas centred above this */ --fl-sidebar-w: 256px; /* left nav rail */ --fl-content-max: 1280px;/* main content max-width */ --fl-page-pad: 32px; /* desktop page padding */ --fl-page-pad-mob: 16px; /* mobile page padding */ --fl-gap: 24px; /* default grid/stack gap */ --fl-mobile-nav-h: 64px; /* mobile 4-item nav bar height */ /* Responsive breakpoint reference (used in account.css media queries): rail ≥ 1536 (canvas capped) · collapsed drawer 1280–1535 · mobile < 1280 */ /* ---------------------------------------------------------------------- MOTION & LAYERING ---------------------------------------------------------------------- */ --fl-transition: 160ms ease; --fl-transition-slow: 240ms ease; --fl-z-nav: 100; --fl-z-sticky: 200; --fl-z-popover: 900; --fl-z-modal: 1000; }