/** * Forsmind design tokens — light-first with dark mode. * Source of truth for every Forsmind app. Copy this file (plus assets/fonts/) * into the app; do not fork the values. The website (Forsmind_web2) holds the * same palette in its own Tailwind @theme block. * * Dark mode: set data-theme="dark" on , or rely on the * prefers-color-scheme fallback below. */ /* ── Fonts (self-hosted — NEVER hotlink Google Fonts; GDPR) ─────────── */ @font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 400; font-display: swap; src: url("./fonts/space-grotesk-400.woff2") format("woff2"); } @font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 500; font-display: swap; src: url("./fonts/space-grotesk-500.woff2") format("woff2"); } @font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("./fonts/inter-400.woff2") format("woff2"); } @font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("./fonts/inter-500.woff2") format("woff2"); } :root { /* ── Brand constants (identical in both modes) ──────────────────── */ --fm-djupfors: #0B1220; /* Djupfors — brand dark */ --fm-midnatt: #15233B; /* Midnatt — dark surface */ --fm-forsbla: #1AAFD2; /* Forsblå — THE accent, use sparingly */ --fm-forsbla-dark: #0E7A96; /* Forsblå dark — accent text/icons on light (AA) */ --fm-forsbla-hover: #1597B8; /* hover for filled Forsblå */ --fm-forsbla-tint: #E1F4F9; /* light Forsblå tint (chips, step circles) */ --fm-isgra: #E8EEF4; /* Isgrå — alt light surface */ --fm-skum: #F4F7FA; /* Skum — light bg / text on dark */ --fm-on-accent: #06222B; /* text on Forsblå fills (AA) */ --fm-font-display: "Space Grotesk", sans-serif; --fm-font-body: "Inter", system-ui, sans-serif; --fm-radius-sm: 4px; --fm-radius-md: 6px; /* buttons, inputs */ --fm-radius-lg: 8px; /* cards */ --fm-radius-xl: 12px; /* modals */ --fm-radius-full: 9999px; --fm-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --fm-duration-fast: 150ms; /* color/background transitions */ --fm-duration-base: 200ms; --fm-duration-slow: 700ms; /* entrance reveals */ /* ── Semantic (light mode — the default) ────────────────────────── */ --fm-bg: var(--fm-skum); /* page background */ --fm-surface: #FFFFFF; /* cards, inputs, panels */ --fm-surface-alt: var(--fm-isgra); /* alt sections, table stripes */ --fm-text: var(--fm-djupfors); /* headings, primary text */ --fm-text-muted: #5F6E80; /* body/secondary text */ --fm-text-faint: #8296A9; /* placeholders, tertiary */ --fm-accent-text: var(--fm-forsbla-dark); /* links, small accent marks */ --fm-border: rgba(11, 18, 32, 0.12); --fm-border-strong: rgba(11, 18, 32, 0.22); /* Status — functional only (form states, alerts, badges), never decorative. Text values pass AA on --fm-surface; pair with the matching tint bg. */ --fm-success: #15803D; --fm-success-tint: #E3F3EA; --fm-warning: #B45309; --fm-warning-tint: #FBF0DF; --fm-error: #B91C1C; --fm-error-tint: #FBE7E7; /* Overlay elevation — flat is the default; shadows ONLY for floating layers (dropdown, popover, modal). */ --fm-shadow-overlay: 0 4px 16px rgba(11, 18, 32, 0.14); --fm-shadow-modal: 0 16px 48px rgba(11, 18, 32, 0.22); color-scheme: light; } [data-theme="dark"] { --fm-bg: var(--fm-djupfors); --fm-surface: var(--fm-midnatt); --fm-surface-alt: #101B30; --fm-text: var(--fm-skum); --fm-text-muted: #9AA8B8; --fm-text-faint: #6E7F92; --fm-accent-text: var(--fm-forsbla); /* full Forsblå passes on dark */ --fm-border: rgba(244, 247, 250, 0.14); --fm-border-strong: rgba(244, 247, 250, 0.28); --fm-success: #4ADE80; --fm-success-tint: rgba(74, 222, 128, 0.12); --fm-warning: #FBBF24; --fm-warning-tint: rgba(251, 191, 36, 0.12); --fm-error: #F87171; --fm-error-tint: rgba(248, 113, 113, 0.12); --fm-shadow-overlay: 0 4px 16px rgba(0, 0, 0, 0.4); --fm-shadow-modal: 0 16px 48px rgba(0, 0, 0, 0.55); color-scheme: dark; } @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --fm-bg: var(--fm-djupfors); --fm-surface: var(--fm-midnatt); --fm-surface-alt: #101B30; --fm-text: var(--fm-skum); --fm-text-muted: #9AA8B8; --fm-text-faint: #6E7F92; --fm-accent-text: var(--fm-forsbla); --fm-border: rgba(244, 247, 250, 0.14); --fm-border-strong: rgba(244, 247, 250, 0.28); --fm-success: #4ADE80; --fm-success-tint: rgba(74, 222, 128, 0.12); --fm-warning: #FBBF24; --fm-warning-tint: rgba(251, 191, 36, 0.12); --fm-error: #F87171; --fm-error-tint: rgba(248, 113, 113, 0.12); --fm-shadow-overlay: 0 4px 16px rgba(0, 0, 0, 0.4); --fm-shadow-modal: 0 16px 48px rgba(0, 0, 0, 0.55); color-scheme: dark; } } /* ── Base ───────────────────────────────────────────────────────────── */ body { background: var(--fm-bg); color: var(--fm-text); font-family: var(--fm-font-body); font-weight: 400; } /* Visible focus everywhere — brand accessibility rule. */ :where(a, button, input, textarea, select, [tabindex]):focus-visible { outline: 2px solid var(--fm-forsbla); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }