:root { /* Match old app's palette (see fipo-frontend/src/assets/css/theme/standard.css). */ --bg: #f8f8f8; --surface: #fff; --surface-2: #fafafa; --fg: #4a4a4a; /* 2026-04-24: bumpet fra #9a9a9a (2.9:1 — failed WCAG AA) → #6b6b6b (5.20:1 — AA solid). Brukt som sekundær tekst: sidebar-headings, nav-items, field-labels, inquery-body. Se docs/design.md §Contrast. */ --muted: #6b6b6b; --border: #e7e7e7; /* 2026-04-24: nytt token for actionable UI-borders (inputs, selects, textareas, btn-ghost). Må passere WCAG 1.4.11 (3:1 mot surface). `--border` (#e7e7e7, 1.22:1) er OK for dekorative kort-kanter, men for kontroller brukeren skal klikke trenger vi 3:1 for å møte AA. #8a8a8a gir 3.38:1 mot hvit → solid AA. */ --border-strong: #8a8a8a; --link: #3696fc; --link-hover: #235bb0; --accent: #3696fc; /* Solid-button hover: separate from --link-hover (which exists to darken in light mode and lighten in dark mode for *text* links). Buttons have white text and need DARKER bg in both modes so the label stays readable. */ --btn-primary-hover: #235bb0; --danger: #e52320; --success: #10b981; /* Function-icon palette — see docs/design.md §Colored function icons */ --icon-blue: #3696fc; --icon-blue-soft: rgba(54, 150, 252, 0.12); --icon-green: #10b981; --icon-green-soft: rgba(16, 185, 129, 0.14); --icon-amber: #f59e0b; --icon-amber-soft: rgba(245, 158, 11, 0.15); --icon-purple: #8b5cf6; --icon-purple-soft: rgba(139, 92, 246, 0.14); --icon-red: #ef4444; --icon-red-soft: rgba(239, 68, 68, 0.12); --icon-red-line: rgba(239, 68, 68, 0.4); --shade-1: #f8f9fc; --shade-2: #f2f2f2; /* Code-block surface — used by `.token-value` for OAuth/secret display on /agent/settings/integrations. Distinct from `--shade-2` (which is for inline `` and dense table stripes) — code blocks need higher contrast since they hold copy-paste-critical content. */ --code-bg: #1f2329; --code-fg: #e5e7eb; /* Logo backdrop — third-party brand logos (Microsoft 365, AI Gateway, CMDB) are designed for white-on-white. We keep the backdrop white in BOTH themes so logos render as their vendor expects. Used on `.integration-tile-logo` + `.integration-detail-logo`. Don't reuse this token elsewhere — logos are the only legitimate "white in dark mode" surface. */ --logo-backdrop: #fff; /* Brand colors — third-party identity, kept identical in both themes so badges/chips render in the vendor's recognised hue. Add new brands here as `---blue` etc. only when there's a second use-site; one-off brand-mentions can stay hardcoded inline-CSS-property. */ --ms-blue: #0078d4; --radius: 6px; --radius-lg: 10px; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow: 0 2px 8px rgba(0, 0, 0, 0.06); --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* Content widths — see docs/design.md §Content widths. */ --content-narrow: 700px; /* fokusert: enkle skjemaer, profil-sider */ --content-default: 900px; /* standard: settings landing, innstillinger-undersider */ --content-wide: 1400px; /* dense data: ticket list, rapporter */ } /* ------ Dark mode ------ Token override. Every view is expected to use `var(--surface)` / `var(--fg)` / etc. — no hard-coded #fff / #000 — so switching `` re-skins the whole app. Toggle via `helpers/theme.js`; persists in localStorage. */ :root[data-theme="dark"] { --bg: #161619; --surface: #1e1e22; --surface-2: #2a2a30; --fg: #e5e5e7; --muted: #8a8a92; --border: #2e2e34; --link: #66b2ff; --link-hover: #a3cdff; --accent: #4ba4ff; /* Darker than --accent so white button-text stays readable on hover. #1d68bd vs #ffffff = 4.7:1 (passes WCAG AA for normal text). */ --btn-primary-hover: #1d68bd; --danger: #ef5350; --success: #34d399; /* Icon colours stay saturated (they carry meaning); soft-tints stay as rgba() — their alpha sits well on the darker background too. */ --icon-blue: #4ba4ff; --icon-blue-soft: rgba(75, 164, 255, 0.18); --icon-green: #34d399; --icon-green-soft: rgba(52, 211, 153, 0.18); --icon-amber: #fbbf24; --icon-amber-soft: rgba(251, 191, 36, 0.20); --icon-purple: #a78bfa; --icon-purple-soft: rgba(167, 139, 250, 0.20); --icon-red: #f87171; --icon-red-soft: rgba(248, 113, 113, 0.20); --icon-red-line: rgba(248, 113, 113, 0.45); --shade-1: #26262b; /* hover-bg */ --shade-2: #2a2a30; /* deeper shade for stripes / dense tables */ /* Code-block surface — slightly lighter than --bg/--surface so the block reads as "elevated" against dark surrounds. */ --code-bg: #2d333b; --code-fg: #e5e7eb; /* `--logo-backdrop` stays white in dark mode by design — see comment in light-mode :root. Vendor-logo expectation overrides theme. */ --logo-backdrop: #fff; /* `--ms-blue` stays the brand value across themes — same rationale as logo-backdrop. */ --ms-blue: #0078d4; /* Dark-mode input-border: 3.21:1 mot #1e1e22 (AA). */ --border-strong: #6a6a70; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.55); --shadow: 0 2px 8px rgba(0, 0, 0, 0.6); } /* Images can look harsh on a dark surface; tone them slightly. Applies to raster photos (avatars, attachment thumbs). */ :root[data-theme="dark"] img { filter: brightness(0.95); } * { box-sizing: border-box; } /* HTML `hidden` attribute is UA-styled to `display: none`, but any class that sets `display: flex|grid|block|…` wins due to specificity. Restore the intent globally so `