/* DRK white-label overrides — Deutsches Rotes Kreuz * * Light-only brand (no dark mode). * Maps the DRK palette onto the design-token contract in packages/styles/base.css. * Loaded via after app.css, so semantic overrides use !important to win the * cascade (V1 approach — see apps/fmf/WHITE_LABEL_DRK.md for the data-brand follow-up). */ /* DRK brand font: Open Sans, self-hosted. * Only fetched when this sheet is loaded (i.e. DRK mode) and text actually uses it. * Files live in static/branding/drk/fonts/ — see `pnpm sync:drk-fonts` in package.json. */ @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 300 800; font-display: swap; src: url('/branding/drk/fonts/open-sans-latin-wght-normal.woff2') format('woff2-variations'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Open Sans'; font-style: italic; font-weight: 300 800; font-display: swap; src: url('/branding/drk/fonts/open-sans-latin-wght-italic.woff2') format('woff2-variations'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { /* DRK has no dark mode: force the light branch of every light-dark() token. */ color-scheme: light !important; /* ---- Brand font ---- */ --font-family-base: 'Open Sans', sans-serif !important; --font-family-heading: 'Open Sans', sans-serif !important; /* ---- DRK brand palette (primitives) ---- */ --drk-white: #ffffff; --drk-clinic-white: #f9f9f7; --drk-mink-white: #efeeea; --drk-season-white: #d4cece; --drk-brainstem-grey: #b4b4b4; --drk-steeple-grey: #847d7c; --drk-washed-grey: #2f2a28; --drk-black: #000000; --drk-rot: #e60005; --drk-dunkelrot: #a51e0f; --drk-sapphire-blue: #2275d0; --drk-blue: #002d55; --drk-calgar-blue: #008ccd; --drk-lime-yellow: #dbff00; --drk-bee-yellow: #f3ff00; --drk-classic-green: #3abd56; --drk-kelley-green: #10b634; --drk-rust-orange: #d36510; --drk-apricot: #f56900; /* ---- Surfaces ---- */ --bg-surface: var(--drk-white) !important; --bg-base: var(--drk-clinic-white) !important; --bg-muted: var(--drk-mink-white) !important; --bg-subtle: var(--drk-season-white) !important; --bg-card: var(--drk-white) !important; /* ---- Text colors ---- */ --text-primary: var(--drk-washed-grey) !important; --text-secondary: var(--drk-blue) !important; --text-muted: var(--drk-steeple-grey) !important; --text-subtle: var(--drk-steeple-grey) !important; --text-placeholder: var(--drk-brainstem-grey) !important; /*---- Font weights ----*/ --font-weight-normal: 600 !important; --font-weight-medium: 700 !important; --font-weight-semibold: 800 !important; --font-weight-bold: 900 !important; /* Font Sizes */ --font-size-xs: 0.875rem; /* 12px – Badge, InfoRow label, MenuItem hint */ --font-size-sm: 1rem; /* 14px – Labels, hints, secondary text, UI chrome */ --font-size-base: 1.125rem; /* 16px – Body text, form inputs, list items */ --font-size-md: 1.25rem; /* 18px – Header logo */ --font-size-lg: 1.5rem; /* 20px – Heading-md, drawer headings */ --font-size-xl: 1.75rem; /* 24px – Heading-lg */ --font-size-2xl: 2rem; /* 28px – Page h1 (e.g. signin) */ /* ---- Icons — DRK icons are more prominent than the default subtle style ---- */ --icon-subtle: var(--drk-steeple-grey) !important; --icon-default: var(--drk-blue) !important; --icon-strong: var(--drk-rot) !important; /* ---- Borders ---- */ --border-subtle: var(--drk-mink-white) !important; --border-default: var(--drk-washed-grey) !important; --border-strong: var(--drk-washed-grey) !important; /* ---- Interactive — primary is DRK red, danger is the darker red to stay distinct ---- */ --interactive-primary: var(--drk-rot) !important; --interactive-primary-hover: var(--drk-dunkelrot) !important; --interactive-primary-text: var(--drk-white) !important; --interactive-secondary: var(--drk-mink-white) !important; --interactive-secondary-hover: var(--drk-season-white) !important; --interactive-secondary-text: var(--drk-washed-grey) !important; --interactive-danger: var(--drk-dunkelrot) !important; --interactive-danger-hover: color-mix(in srgb, var(--drk-dunkelrot) 85%, black) !important; --interactive-danger-text: var(--drk-white) !important; /* ---- Links — DRK blue ---- */ --link-default: var(--drk-sapphire-blue) !important; --link-hover: var(--drk-blue) !important; --link-visited: var(--drk-blue) !important; /* ---- Accent — DRK blue (replaces plum) ---- */ --accent-default: var(--drk-blue) !important; --accent-hover: var(--drk-sapphire-blue) !important; --accent-subtle: color-mix(in srgb, var(--drk-blue) 10%, white) !important; --accent-text: var(--drk-blue) !important; /* ---- Focus ---- */ --focus-ring: var(--drk-sapphire-blue) !important; --focus-ring-secondary: var(--drk-blue) !important; --focus-ring-offset: var(--drk-white) !important; /* ---- Radius — DRK uses square corners (pills/avatars keep --radius-full) ---- */ --radius-xs: 0 !important; --radius-sm: 0 !important; --radius-md: 0 !important; --radius-lg: 0 !important; --radius-xl: 0 !important; --radius-2xl: 0 !important; /* ---- Semantic tones — derived from DRK hues via color-mix ---- * subtle = soft surface (light tint), strong = filled, text = darkened hue for contrast. */ /* Success — classic green */ --tone-success-bg-subtle: color-mix(in srgb, var(--drk-classic-green) 12%, white) !important; --tone-success-border-subtle: color-mix(in srgb, var(--drk-classic-green) 35%, white) !important; --tone-success-text-subtle: color-mix(in srgb, var(--drk-kelley-green) 75%, black) !important; --tone-success-bg-strong: color-mix(in srgb, var(--drk-classic-green) 25%, white) !important; --tone-success-border-strong: var(--drk-classic-green) !important; --tone-success-text-strong: color-mix(in srgb, var(--drk-kelley-green) 80%, black) !important; /* Danger — DRK red */ --tone-danger-bg-subtle: color-mix(in srgb, var(--drk-rot) 10%, white) !important; --tone-danger-border-subtle: color-mix(in srgb, var(--drk-rot) 30%, white) !important; --tone-danger-text-subtle: var(--drk-dunkelrot) !important; --tone-danger-bg-strong: color-mix(in srgb, var(--drk-rot) 22%, white) !important; --tone-danger-border-strong: var(--drk-rot) !important; --tone-danger-text-strong: var(--drk-dunkelrot) !important; /* Warning — apricot / rust orange */ --tone-warning-bg-subtle: color-mix(in srgb, var(--drk-apricot) 12%, white) !important; --tone-warning-border-subtle: color-mix(in srgb, var(--drk-apricot) 35%, white) !important; --tone-warning-text-subtle: color-mix(in srgb, var(--drk-rust-orange) 80%, black) !important; --tone-warning-bg-strong: color-mix(in srgb, var(--drk-apricot) 25%, white) !important; --tone-warning-border-strong: var(--drk-rust-orange) !important; --tone-warning-text-strong: color-mix(in srgb, var(--drk-rust-orange) 85%, black) !important; /* Info & neutral-strong — sapphire / DRK blue */ --tone-info-bg-subtle: color-mix(in srgb, var(--drk-sapphire-blue) 10%, white) !important; --tone-info-border-subtle: color-mix(in srgb, var(--drk-sapphire-blue) 32%, white) !important; --tone-info-text-subtle: var(--drk-blue) !important; --tone-info-bg-strong: color-mix(in srgb, var(--drk-sapphire-blue) 22%, white) !important; --tone-info-border-strong: var(--drk-sapphire-blue) !important; --tone-info-text-strong: var(--drk-blue) !important; --tone-neutral-bg-strong: color-mix(in srgb, var(--drk-blue) 10%, white) !important; --tone-neutral-border-strong: color-mix(in srgb, var(--drk-blue) 30%, white) !important; --tone-neutral-text-strong: var(--drk-blue) !important; /* ---- Status icons (own tokens, not aliases of the tone scale) ---- */ --status-success-icon: var(--drk-kelley-green) !important; --status-error-icon: var(--drk-rot) !important; --status-warning-icon: var(--drk-rust-orange) !important; --status-info-icon: var(--drk-sapphire-blue) !important; --field-radius-sm: var(--radius-sm) !important; --field-radius-md: var(--radius-md) !important; --field-radius-lg: var(--radius-lg) !important; }