/* ──────────────────────────────────────────────────────────────── E-NOTARIUS DESIGN SYSTEM — colors + type tokens Source of truth for all surfaces, text, borders, and typography. ──────────────────────────────────────────────────────────────── */ :root { /* ─── BASE PALETTE ─────────────────────────────────────────── */ /* Ink — deep warm black for primary text + dark cards */ --ink-900: #0E0E0C; /* primary text, dark cards */ --ink-700: #4D4942; /* secondary text */ --ink-500: #6E6960; /* tertiary text, eyebrows on light — 5.45:1 vs vit, 5.18:1 vs cream-100 */ --ink-500-legacy: #847F76; /* DEPRECATED: 3.98:1, underkänt WCAG AA. Endast för icke-text (dekorativa linjer). */ --ink-300: #DDD8CF; /* hairline borders on light */ /* Cream — the warm off-white system */ --cream-50: #FFFFFF; /* pure white (rarely used) */ --cream-100: #FBF9F4; /* primary CARD surface */ --cream-150: #F8F6F0; /* alt cream — quiet rows / hover */ --cream-200: #F5F2EB; /* eyebrow on dark, alt surface */ --cream-300: #F0EDE5; /* dark-card text (high contrast) */ --cream-400: #E8E3D9; /* dark-card hairline */ /* Accent — terracotta (used SPARINGLY: icons, italic display ink) */ --accent-600: #B5552E; /* core terracotta */ --accent-500: #C26B47; /* hover / lighter face */ --accent-100: #F7E9DF; /* tint surface */ /* Gold — ENDAST knappar på mörk yta. Se DECISIONS 2026-07-27. Terracotta har för låg kontrast mot ink-900 för att bära en knapp. Får aldrig användas på ljus yta och aldrig som textfärg. */ --gold-400: #C9A57B; /* knappyta på mörkt kort */ --gold-300: #D7B894; /* hover */ /* Dark-card translucent overlays */ --on-dark-fg: rgba(248,246,240,1); --on-dark-fg-muted: rgba(240,237,229,0.72); --on-dark-fg-faint: rgba(240,237,229,0.50); --on-dark-border: rgba(240,237,229,0.28); --on-dark-hairline: rgba(240,237,229,0.12); --on-dark-surface: rgba(240,237,229,0.04); /* Ikoncirkel på mörk yta. Guldtonad, inte neutral — den ljusa motsvarigheten (`--bg-tint`) skiljs från sin yta av både ljushet OCH värme, och det måste gälla här också. Uppmätt 1.24:1 mot ink-900, mot ljusa kortets 1.19:1. Neutralt 4% gav 1.08:1 och försvann i bakgrunden. */ --on-dark-tint: rgba(201,165,123,0.14); /* ─── SEMANTIC SURFACE + TEXT ──────────────────────────────── */ --bg-page: var(--cream-50); --bg-card: var(--cream-100); /* THE card color */ --bg-card-alt: var(--cream-150); --bg-card-dark: var(--ink-900); /* dark card */ --bg-tint: var(--accent-100); --fg-primary: var(--ink-900); --fg-secondary: var(--ink-700); --fg-tertiary: var(--ink-500); --fg-on-dark: var(--cream-300); --fg-on-dark-muted: var(--on-dark-fg-muted); --fg-accent: var(--accent-600); --border-default: var(--ink-300); --border-soft: #E8E3D9; --border-on-dark: var(--on-dark-border); --border-hairline: var(--on-dark-hairline); --action-primary-bg: var(--ink-900); --action-primary-bg-hover: #232320; /* bläck ett steg upp — hovring på primärknapp */ --action-primary-fg: var(--cream-200); --action-secondary-bg: var(--cream-100); --action-secondary-fg: var(--ink-900); --action-secondary-bd: var(--ink-300); /* Guldknapp — endast på mörk yta */ --action-gold-bg: var(--gold-400); --action-gold-bg-hover: var(--gold-300); --action-gold-fg: var(--ink-900); /* ─── STATUS — ENDAST ÄRENDESYSTEMET ───────────────────────── */ /* Får INTE användas på marknadssajten. Se docs/04 för resonemanget. Avmättade för att sitta i den varma paletten. Status kommuniceras ALDRIG med färg ensam — alltid ikon + textetikett. */ --status-success-fg: #4F6B4A; /* klart, godkänt — 5.94:1 vs vit */ --status-success-tint: #E9EFE6; --status-warning-fg: #8A6420; /* väntar, komplettering — 5.35:1 vs vit */ --status-warning-tint: #F6EBD6; --status-error-fg: #8C2F22; /* avvisat, fel — 8.25:1 vs vit */ --status-error-tint: #F7E3DF; --status-neutral-fg: var(--ink-700); /* inkommet, utkast */ --status-neutral-tint: var(--cream-150); /* OBS: --status-error-fg (#8C2F22) ligger nära --accent-600 (#B5552E). Terracotta är brand, oxblod är fel. Placera dem aldrig intill varandra. */ /* ─── FORMULÄR ─────────────────────────────────────────────── */ --field-bg: var(--cream-50); --field-bg-hover: var(--cream-150); --field-bg-disabled: var(--cream-200); --field-border: var(--ink-300); --field-border-hover:#C9C3B8; --field-border-focus:var(--ink-900); --field-border-error:var(--status-error-fg); --field-fg: var(--fg-primary); --field-placeholder: var(--ink-500); --field-height: 44px; /* min träffyta, mobil */ --field-height-sm: 36px; --field-padding-x: var(--space-4); /* ─── FOKUS ────────────────────────────────────────────────── */ --focus-ring-color: var(--ink-900); --focus-ring-color-on-dark:var(--cream-300); --focus-ring-width: 2px; --focus-ring-offset: 2px; /* ─── BREAKPOINTS ──────────────────────────────────────────── */ /* Speglar Bricks standardbreakpoints exakt. Ändra inte utan att ändra i Bricks samtidigt. Desktop-first, max-width. */ --bp-tablet: 991px; /* Bricks: Tablet portrait */ --bp-mobile-land: 767px; /* Bricks: Mobile landscape */ --bp-mobile-port: 478px; /* Bricks: Mobile portrait */ /* Satsyta 1280px. Tre tjänstekort med 24px mellanrum ger 410.67px per kort. Korten SKA vara kvadratiska, inte långsmala. Kortstorleken HÄRLEDS från satsytan — hårdkoda den aldrig. Den låg som `464px` när satsytan var 1440, och när satsytan ändrades sprack kortrutnätet tyst: tre kort à 464 får inte plats på 1280, så rutnätet bröt till två per rad. */ --container-max: 1280px; --grid-gap: var(--space-6); /* 24px mellan korten */ --card-feature-size: calc((var(--container-max) - 2 * var(--grid-gap)) / 3); --container-pad: var(--space-8); /* 40px desktop */ --container-pad-sm: var(--space-6); /* 24px mobil */ --section-pad-y: var(--space-11); /* 96px desktop */ /* ─── TYPE FAMILIES ────────────────────────────────────────── */ --font-display: "Fraunces", "Times New Roman", serif; /* H1–H4 */ --font-accent: "Instrument Serif", "Fraunces", serif; /* italic accent in display */ --font-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; /* ─── TYPE SCALE — DISPLAY (Fraunces) ──────────────────────── */ /* All display sizes pair with italic Instrument Serif at same size */ --display-xxl: 64px; /* hero on dark CTA banners */ --display-xl: 56px; /* section heads "Från ärende till…" */ --display-lg: 52px; /* dark-card lead "Avancerade förrättningar" */ --display-md: 32px; /* section heads, list-row title */ --display-card-title: 36px; /* stora tjänstekortets rubrik — mätt mot frontsidedesignen, som ligger på 34–36px. Egen token: de avlånga korten ska INTE följa med, deras rubrik stannar på display-md. */ --display-sm: 23px; /* process step heading "Välj tjänst" */ --display-xs: 22px; /* FAQ row title */ /* Priset är en egen roll och förekommer i både kort och rader. Egna tokens eftersom display-xs delas med FAQ-rubriken och text-xxs med alla eyebrows — de får inte följa med när priset justeras. */ --price-size: 26px; --price-note-size: 14px; --display-xxs: 20px; /* aside heading */ --display-line: 1.04; --display-track: -0.025em; /* ─── TYPE SCALE — UI (Inter) ──────────────────────────────── */ --text-lg: 18px; /* hero subhead */ --text-md: 16px; /* body on dark cards */ --text-base: 15.5px; /* primary body */ --text-sm: 14.5px; /* button label, secondary body */ --text-xs: 14px; /* small body, footer links */ --text-xxs: 11.5px; /* EYEBROW (uppercase tracked) */ --text-line: 1.6; --text-line-tight: 1.45; --eyebrow-track: 0.14em; /* tracked uppercase eyebrows */ /* 600, inte 500. Versalt och glest spärrat på 11.5px läser optiskt tunnare än samma vikt i gemener — versalerna saknar över- och underlängder att hålla i, och tracking lägger luft mellan stammarna. Beslut 2026-07-30. */ --eyebrow-weight: 600; /* Eyebrow på mörk yta får en halv punkt extra. Ljus text på mörk botten läser optiskt mindre och tunnare än samma grad på ljus botten. */ --eyebrow-size-on-dark: 12px; /* Ärendenumret på kvittot ska gå att läsa högt i telefon och stämma av tecken för tecken. Öppen tracking skiljer 0 från O och 1 från l. */ --id-track: 0.04em; /* ─── FORMULÄRETS SATSBREDD ────────────────────────────────── */ /* Intagsformulärets kolumn. Bredare fält flyttar etiketten för långt från sitt värde och gör radlängden oskanbar. Kvittot ligger i samma bredd. */ --form-col: 720px; /* ─── SPACING SCALE ────────────────────────────────────────── */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 40px; --space-9: 56px; --space-10: 72px; --space-11: 96px; --space-12: 128px; /* ─── RADII ────────────────────────────────────────────────── */ --radius-xs: 4px; /* tiny ticks */ --radius-sm: 7px; /* small buttons */ --radius-md: 9px; /* primary buttons, inputs */ --radius-lg: 14px; /* asides / small cards */ --radius-xl: 18px; /* hero cards, dark feature cards */ --radius-pill: 999px; /* tag chips */ --radius-full: 9999px; /* round icon badges */ /* ─── SHADOWS ──────────────────────────────────────────────── */ /* Shadows are used sparingly — most depth comes from borders. */ --shadow-none: none; --shadow-soft: 0 1px 2px rgba(14,14,12,0.04); --shadow-card: 0 1px 0 rgba(14,14,12,0.03), 0 8px 24px -12px rgba(14,14,12,0.08); --shadow-pop: 0 12px 40px -16px rgba(14,14,12,0.18); /* ─── MOTION ───────────────────────────────────────────────── */ --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1); --ease-in-out: cubic-bezier(0.45, 0, 0.2, 1); --dur-fast: 120ms; --dur-base: 180ms; --dur-slow: 320ms; } /* ──────────────────────────────────────────────────────────────── SEMANTIC ELEMENT STYLES ──────────────────────────────────────────────────────────────── */ .h1, h1.brand { font-family: var(--font-display); font-weight: 400; font-size: var(--display-xl); line-height: var(--display-line); letter-spacing: var(--display-track); color: var(--fg-primary); margin: 0; } .h2, h2.brand { font-family: var(--font-display); font-weight: 400; font-size: var(--display-md); line-height: 1.12; letter-spacing: -0.02em; color: var(--fg-primary); margin: 0; } .h3, h3.brand { font-family: var(--font-display); font-weight: 400; font-size: var(--display-sm); line-height: 1.15; letter-spacing: -0.018em; color: var(--fg-primary); margin: 0; } /* Kursiv display är ALLTID terracotta. En regel, inga undantag. Gäller hero, sektionsrubriker och allt annat. På mörk yta används .display-italic--on-dark eftersom terracotta inte bär mot bläck. */ .display-italic { font-family: var(--font-accent); font-style: italic; font-weight: 400; color: var(--fg-accent); } .display-italic--on-dark { color: var(--fg-on-dark); } .eyebrow { font-family: var(--font-ui); font-size: var(--text-xxs); font-weight: var(--eyebrow-weight); /* aldrig ett tal här — token, annars glider de isär */ letter-spacing: var(--eyebrow-track); text-transform: uppercase; color: var(--fg-tertiary); } /* Sektions-eyebrow — terracotta med efterföljande streck. Kort-eyebrows behåller dov ton, annars tappar accenten sin verkan. */ .eyebrow--accent { color: var(--fg-accent); display: inline-flex; align-items: center; gap: var(--space-3); } .eyebrow--accent::after { content: ""; width: 32px; height: 1px; background: var(--fg-accent); opacity: 0.5; } .body, p.brand { font-family: var(--font-ui); font-size: var(--text-base); line-height: 1.6; color: var(--fg-secondary); margin: 0; } .body-sm { font-family: var(--font-ui); font-size: var(--text-xs); line-height: 1.55; color: var(--fg-secondary); margin: 0; } .ordinal { font-family: var(--font-display); font-style: italic; font-size: 14px; color: var(--fg-tertiary); }