/*
* IT Butler — Brand Tokens
* Version 1.0 · May 2026
*
* Usage:
*
* Then reference tokens as var(--color-butler-blue) etc.
*
* Fonts (add to before this stylesheet):
*
*
*
*/
:root {
/* ─────────────────────────────────────────
COLOUR PALETTE
───────────────────────────────────────── */
/* Primary */
--color-butler-blue: #1B4F8A; /* Primary brand, CTA buttons, shield mark */
--color-nordic-amber: #F0A500; /* Accent, highlights, reversed shield, star ratings */
/* Neutrals */
--color-linen-white: #F7F6F2; /* Page background (warm off-white, easier on seniors' eyes) */
--color-midnight-navy: #0D1B2A; /* Dark mode background, deep contrast text */
--color-ink-night: #1A1A2E; /* Primary text on light backgrounds */
--color-slate-grey: #5A6475; /* Secondary text, subtitles, taglines */
/* Utility / pure */
--color-white: #FFFFFF;
--color-black: #000000;
/* Semantic colours — these may change with the active colour scheme. */
--color-surface-elevated: #FFFFFF;
--color-interactive: #1B4F8A;
--color-accent-text: #9A6500;
/* Status */
--color-success: #1E8A5E; /* Confirmed, resolved, active */
--color-warning: #D97706; /* Pending, attention needed */
--color-error: #C0392B; /* Failed, critical, destructive */
/* Tints (10% opacity backgrounds for status badges) */
--color-success-tint: #1E8A5E1A;
--color-warning-tint: #D977061A;
--color-error-tint: #C0392B1A;
/* ─────────────────────────────────────────
TYPOGRAPHY
───────────────────────────────────────── */
--font-heading: 'Plus Jakarta Sans', 'Segoe UI', Helvetica, Arial, sans-serif;
--font-body: 'Lora', Georgia, 'Times New Roman', serif;
--font-ui: 'Plus Jakarta Sans', 'Segoe UI', Helvetica, Arial, sans-serif;
--font-mono: 'Courier New', Courier, monospace;
/* Scale (Major Third, base 16px) */
--text-xs: 0.75rem; /* 12px — legal, captions */
--text-sm: 0.875rem; /* 14px — labels, meta */
--text-base: 1rem; /* 16px — body copy */
--text-md: 1.125rem; /* 18px — lead text, large body */
--text-lg: 1.25rem; /* 20px — card headings */
--text-xl: 1.5rem; /* 24px — section subheadings */
--text-2xl: 1.875rem; /* 30px — section headings */
--text-3xl: 2.25rem; /* 36px — page headings */
--text-4xl: 3rem; /* 48px — hero headline */
--text-5xl: 3.75rem; /* 60px — display (large hero) */
/* Weight */
--weight-regular: 400;
--weight-medium: 500;
--weight-semibold: 600;
--weight-bold: 700;
--weight-extrabold: 800;
/* Line height */
--leading-tight: 1.2;
--leading-snug: 1.35;
--leading-normal: 1.5;
--leading-relaxed: 1.65; /* Preferred for senior-facing body copy */
--leading-loose: 1.8;
/* Letter spacing */
--tracking-tight: -0.02em;
--tracking-normal: 0em;
--tracking-wide: 0.05em;
--tracking-wider: 0.1em;
--tracking-caps: 0.15em; /* Used on "DIGITAL VAKTMÄSTARE" tagline */
/* ─────────────────────────────────────────
SPACING SCALE (4px base)
───────────────────────────────────────── */
--space-1: 0.25rem; /* 4px */
--space-2: 0.5rem; /* 8px */
--space-3: 0.75rem; /* 12px */
--space-4: 1rem; /* 16px */
--space-5: 1.25rem; /* 20px */
--space-6: 1.5rem; /* 24px */
--space-8: 2rem; /* 32px */
--space-10: 2.5rem; /* 40px */
--space-12: 3rem; /* 48px */
--space-16: 4rem; /* 64px */
--space-20: 5rem; /* 80px */
--space-24: 6rem; /* 96px */
--space-32: 8rem; /* 128px */
/* ─────────────────────────────────────────
BORDER RADIUS
───────────────────────────────────────── */
--radius-sm: 4px;
--radius-md: 8px; /* Default — cards, inputs */
--radius-lg: 12px;
--radius-xl: 16px;
--radius-2xl: 24px;
--radius-full: 9999px; /* Pills, badges */
/* ─────────────────────────────────────────
SHADOWS
───────────────────────────────────────── */
--shadow-xs: 0 1px 2px rgba(13, 27, 42, 0.06);
--shadow-sm: 0 2px 6px rgba(13, 27, 42, 0.08);
--shadow-md: 0 4px 16px rgba(13, 27, 42, 0.10); /* Default card shadow */
--shadow-lg: 0 8px 32px rgba(13, 27, 42, 0.12);
--shadow-xl: 0 16px 48px rgba(13, 27, 42, 0.16);
/* Focus ring — WCAG AA compliant for keyboard navigation */
--shadow-focus: 0 0 0 3px rgba(27, 79, 138, 0.40);
/* ─────────────────────────────────────────
BORDERS
───────────────────────────────────────── */
--border-width: 1px;
--border-color: rgba(90, 100, 117, 0.18);
--border-color-strong: rgba(90, 100, 117, 0.35);
/* ─────────────────────────────────────────
COMPONENT: BUTTONS
Min height 48px — WCAG 2.5.8 target size
───────────────────────────────────────── */
/* Primary (Butler Blue) */
--btn-primary-bg: var(--color-butler-blue);
--btn-primary-bg-hover: #15407A;
--btn-primary-bg-active: #0F3263;
--btn-primary-text: var(--color-white);
--btn-primary-shadow: 0 2px 8px rgba(27, 79, 138, 0.30);
/* Secondary (outline) */
--btn-secondary-bg: transparent;
--btn-secondary-bg-hover: rgba(27, 79, 138, 0.06);
--btn-secondary-border: var(--color-interactive);
--btn-secondary-text: var(--color-interactive);
/* Accent (Nordic Amber — BankID / highlight CTA) */
--btn-accent-bg: var(--color-nordic-amber);
--btn-accent-bg-hover: #D99400;
--btn-accent-bg-active: #C08200;
--btn-accent-text: var(--color-midnight-navy);
--btn-accent-shadow: 0 2px 8px rgba(240, 165, 0, 0.30);
/* Shared */
--btn-height: 48px;
--btn-padding-x: var(--space-6);
--btn-font: var(--font-ui);
--btn-font-size: var(--text-base);
--btn-font-weight: var(--weight-semibold);
--btn-radius: var(--radius-md);
--btn-transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
/* ─────────────────────────────────────────
COMPONENT: INPUTS
───────────────────────────────────────── */
--input-bg: var(--color-surface-elevated);
--input-border: var(--border-color-strong);
--input-border-focus: var(--color-interactive);
--input-text: var(--color-ink-night);
--input-placeholder: var(--color-slate-grey);
--input-height: 48px;
--input-padding-x: var(--space-4);
--input-font-size: var(--text-base);
--input-radius: var(--radius-md);
/* ─────────────────────────────────────────
COMPONENT: CARDS
───────────────────────────────────────── */
--card-bg: var(--color-surface-elevated);
--card-border: var(--border-color);
--card-radius: var(--radius-lg);
--card-shadow: var(--shadow-md);
--card-padding: var(--space-6);
/* ─────────────────────────────────────────
LAYOUT
───────────────────────────────────────── */
--max-width-content: 720px; /* Body copy max width */
--max-width-wide: 1100px; /* Page container */
--max-width-full: 1440px; /* Full-bleed sections */
--header-height: 64px;
/* Breakpoints (reference only — use in media queries, not var()) */
/* --bp-sm: 480px */
/* --bp-md: 768px */
/* --bp-lg: 1024px */
/* --bp-xl: 1280px */
/* ─────────────────────────────────────────
TRANSITIONS
───────────────────────────────────────── */
--transition-fast: 0.1s ease;
--transition-base: 0.2s ease;
--transition-slow: 0.35s ease;
}
/* ─────────────────────────────────────────
DARK MODE OVERRIDES
(Applied automatically via prefers-color-scheme)
───────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
:root {
--color-linen-white: #0D1B2A;
--color-ink-night: #F0EDE6;
--color-slate-grey: #B4BDC8;
--color-surface-elevated: #1A2A3A;
--color-interactive: #75B7FF;
--color-accent-text: #F5BD4F;
--color-success: #5ED6A2;
--color-error: #FF8F83;
--shadow-focus: 0 0 0 3px rgba(117, 183, 255, 0.55);
--border-color: rgba(240, 237, 230, 0.10);
--border-color-strong: rgba(240, 237, 230, 0.20);
--card-bg: #132234;
--card-shadow: 0 4px 20px rgba(0, 0, 0, 0.30);
--input-bg: #1A2E42;
--input-border: rgba(240, 237, 230, 0.20);
--input-text: #F0EDE6;
--input-placeholder: #B4BDC8;
}
}