/* ============================================================ siQmo — Corporate Design Tokens Brandschutz · Arbeitsschutz · Schulungen -------------------------------------------------------------- Group-coherent with the sister brand "audyra": same naming convention (--siq- prefix), same font family (IBM Plex Sans). Completely different color world — cold, precise, authoritative. Flat: no gradients, no shadows. WCAG 2.2 AA throughout. Mobile-first. ============================================================ */ @import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap"); :root { /* ============================================================ 1 · BRAND — Navy (primary) Corporate navy: classic, authoritative, slightly brighter than midnight. --siq-navy-600 is THE brand color. ============================================================ */ --siq-navy-50: #EEF3FA; --siq-navy-100: #D8E2F1; --siq-navy-200: #B0C3E1; --siq-navy-300: #7E9BCB; --siq-navy-400: #4A6FA8; --siq-navy-500: #1E4A8F; /* interactive / hover-bright */ --siq-navy-600: #163B75; /* ★ PRIMARY BRAND NAVY */ --siq-navy-700: #112E5B; --siq-navy-800: #0C2244; --siq-navy-900: #07172E; /* deepest — footers, ink */ /* ============================================================ 2 · ACCENT — Signal red True DIN/extinguisher signal red. --siq-red-500 is the accent fill (large UI/icons). Use --siq-red-600/700 for red TEXT on white (AA-safe). Never red-500 for body text. ============================================================ */ --siq-red-50: #FDECEB; --siq-red-100: #FBD5D2; --siq-red-200: #F6A8A2; --siq-red-300: #F07A71; --siq-red-400: #EC4D42; --siq-red-500: #E2231A; /* ★ SIGNAL RED — accent fill, icons, large */ --siq-red-600: #C51A12; /* red text on white (AA) */ --siq-red-700: #A0140D; /* red text small / pressed */ /* ============================================================ 3 · NEUTRALS — Cool grey (NO warm tones) Blue-tinged, precise. --siq-white is the base. ============================================================ */ --siq-white: #FFFFFF; --siq-neutral-50: #F5F7FA; --siq-neutral-100: #EBEEF3; --siq-neutral-200: #DBE0E8; /* hairlines, borders */ --siq-neutral-300: #C2C9D4; --siq-neutral-400: #94A0B0; /* muted icons */ --siq-neutral-500: #6B7686; /* secondary text */ --siq-neutral-600: #4D5667; --siq-neutral-700: #374050; /* primary body text */ --siq-neutral-800: #222A38; --siq-neutral-900: #121823; /* headings ink */ /* ============================================================ 4 · SEMANTIC STATUS — bg / fg pairs (cold, narrow set) ============================================================ */ --siq-success-bg: #E6F4ED; --siq-success-fg: #137A4B; --siq-warning-bg: #FCF1E2; --siq-warning-fg: #9A5B00; --siq-danger-bg: #FDECEB; --siq-danger-fg: #C51A12; --siq-info-bg: #EAF1FB; --siq-info-fg: #1E4A8F; /* ============================================================ 5 · SEMANTIC SURFACE / TEXT tokens ============================================================ */ --siq-bg-page: var(--siq-neutral-50); --siq-bg-surface: var(--siq-white); --siq-bg-surface-2: var(--siq-neutral-100); --siq-bg-inverse: var(--siq-navy-900); /* dark sections */ --siq-bg-hover: var(--siq-neutral-100); --siq-fg-strong: var(--siq-neutral-900); /* headings */ --siq-fg-default: var(--siq-neutral-700); /* body */ --siq-fg-muted: var(--siq-neutral-500); /* secondary */ --siq-fg-subtle: var(--siq-neutral-400); /* tertiary */ --siq-fg-on-navy: var(--siq-white); --siq-fg-brand: var(--siq-navy-600); --siq-fg-accent: var(--siq-red-600); --siq-border-subtle: var(--siq-neutral-200); --siq-border-default: var(--siq-neutral-300); --siq-border-strong: var(--siq-neutral-400); --siq-focus-ring: var(--siq-navy-500); /* ============================================================ 6 · TYPOGRAPHY — IBM Plex Sans (group font) + IBM Plex Mono Mono reserved for technical strings: DIN-Normen, Zertifikat- Nummern, Datum, Telefon. Mobile-first base = 16px. ============================================================ */ --siq-font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --siq-font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Consolas, monospace; --siq-text-xs: 12px; --siq-lh-xs: 1.4; --siq-text-sm: 14px; --siq-lh-sm: 1.5; --siq-text-base: 16px; --siq-lh-base: 1.6; --siq-text-lg: 18px; --siq-lh-lg: 1.55; --siq-text-xl: 20px; --siq-lh-xl: 1.4; --siq-text-2xl: 24px; --siq-lh-2xl: 1.3; --siq-text-3xl: 30px; --siq-lh-3xl: 1.25; --siq-text-4xl: 38px; --siq-lh-4xl: 1.15; --siq-text-5xl: 48px; --siq-lh-5xl: 1.1; --siq-text-6xl: 60px; --siq-lh-6xl: 1.05; --siq-weight-regular: 400; --siq-weight-medium: 500; --siq-weight-semibold: 600; --siq-weight-bold: 700; /* the authoritative sibling uses 700 */ --siq-tracking-tight: -0.02em; /* large display */ --siq-tracking-snug: -0.01em; /* headings */ --siq-tracking-wide: 0.06em; /* eyebrow / kicker, uppercase */ /* ============================================================ 7 · SPACING — 8px grid (multiples of 4) ============================================================ */ --siq-space-1: 4px; --siq-space-2: 8px; --siq-space-3: 12px; --siq-space-4: 16px; --siq-space-5: 20px; --siq-space-6: 24px; --siq-space-8: 32px; --siq-space-10: 40px; --siq-space-12: 48px; --siq-space-16: 64px; --siq-space-20: 80px; --siq-space-24: 96px; /* ============================================================ 8 · RADIUS — small & precise (flat, geometric) ============================================================ */ --siq-radius-sm: 2px; --siq-radius: 4px; /* default — buttons, inputs */ --siq-radius-lg: 8px; /* cards */ --siq-radius-pill: 9999px; /* status pills only */ /* ============================================================ 9 · BORDERS — the workhorse (hierarchy = lines, not shadow) ============================================================ */ --siq-border-1: 1px; --siq-border-2: 2px; --siq-rule-accent: 3px solid var(--siq-red-500); /* red key-line */ /* ============================================================ 10 · ELEVATION — NONE. Flat by mandate. No box-shadow anywhere. Layering = borders + bg steps. (Tokens kept at 'none' so component code can reference them without ever producing a shadow.) ============================================================ */ --siq-shadow: none; --siq-shadow-pop: none; /* ============================================================ 11 · MOTION — sparse, precise ============================================================ */ --siq-ease-out: cubic-bezier(0.2, 0.8, 0.2, 1); --siq-dur-fast: 120ms; --siq-dur-med: 180ms; --siq-dur-slow: 240ms; /* ============================================================ 12 · LAYOUT ============================================================ */ --siq-container: 1200px; --siq-container-narrow: 760px; --siq-gutter: var(--siq-space-6); } /* ============================================================ SEMANTIC TYPOGRAPHY (h1..h4, body, eyebrow, mono, label) Mobile-first; scales up at >=768px. ============================================================ */ html, body { font-family: var(--siq-font-sans); color: var(--siq-fg-default); background: var(--siq-bg-page); font-size: var(--siq-text-base); line-height: var(--siq-lh-base); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .siq-display { font-size: var(--siq-text-4xl); line-height: var(--siq-lh-4xl); font-weight: var(--siq-weight-bold); letter-spacing: var(--siq-tracking-tight); color: var(--siq-fg-strong); margin: 0; } .siq-h1, h1 { font-size: var(--siq-text-3xl); line-height: var(--siq-lh-3xl); font-weight: var(--siq-weight-bold); letter-spacing: var(--siq-tracking-snug); color: var(--siq-fg-strong); margin: 0; } .siq-h2, h2 { font-size: var(--siq-text-2xl); line-height: var(--siq-lh-2xl); font-weight: var(--siq-weight-semibold); letter-spacing: var(--siq-tracking-snug); color: var(--siq-fg-strong); margin: 0; } .siq-h3, h3 { font-size: var(--siq-text-xl); line-height: var(--siq-lh-xl); font-weight: var(--siq-weight-semibold); color: var(--siq-fg-strong); margin: 0; } .siq-h4, h4 { font-size: var(--siq-text-lg); line-height: var(--siq-lh-lg); font-weight: var(--siq-weight-semibold); color: var(--siq-fg-strong); margin: 0; } .siq-body, p { font-size: var(--siq-text-base); line-height: var(--siq-lh-base); color: var(--siq-fg-default); margin: 0; text-wrap: pretty; } .siq-lead { font-size: var(--siq-text-lg); line-height: var(--siq-lh-lg); color: var(--siq-fg-muted); margin: 0; } .siq-eyebrow { font-size: var(--siq-text-sm); line-height: var(--siq-lh-sm); font-weight: var(--siq-weight-semibold); letter-spacing: var(--siq-tracking-wide); text-transform: uppercase; color: var(--siq-fg-accent); margin: 0; } .siq-label { font-size: var(--siq-text-sm); line-height: var(--siq-lh-sm); font-weight: var(--siq-weight-medium); color: var(--siq-fg-default); } .siq-helper, small { font-size: var(--siq-text-xs); line-height: var(--siq-lh-xs); color: var(--siq-fg-muted); } .siq-mono, code, kbd, pre { font-family: var(--siq-font-mono); font-variant-numeric: tabular-nums; font-size: 0.95em; } @media (min-width: 768px) { .siq-display { font-size: var(--siq-text-6xl); line-height: var(--siq-lh-6xl); } .siq-h1, h1 { font-size: var(--siq-text-5xl); line-height: var(--siq-lh-5xl); } .siq-h2, h2 { font-size: var(--siq-text-3xl); line-height: var(--siq-lh-3xl); } .siq-h3, h3 { font-size: var(--siq-text-2xl); line-height: var(--siq-lh-2xl); } } /* ============================================================ FOCUS RING — navy, 2px, offset (WCAG 2.2 focus appearance) ============================================================ */ :where(button, a, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--siq-focus-ring); outline-offset: 2px; border-radius: var(--siq-radius-sm); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }