/* ========================================================= FristRadar Design System — colors_and_type.css Single source of truth for tokens. Import into any artifact: ========================================================= */ /* ---------- Web fonts (Inter, OFL, bundled in /fonts) ---------- */ @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("./fonts/Inter-VariableFont_slnt,wght.ttf") format("truetype-variations"), url("./fonts/Inter-VariableFont_slnt,wght.ttf") format("truetype"); } /* ---------- Tokens ---------- */ :root { /* === MOBILE APP (in‑product, document register) === */ --app-bg: #F4F5F7; --app-surface: #FFFFFF; --app-surface-2: #F9FAFB; --app-ink: #0F1115; /* primary buttons, primary text */ --app-ink-2: #1C2833; /* headings */ --app-ink-3: #5D6D7E; /* secondary text, eyebrows */ --app-ink-4: #98A1AC; /* tertiary, placeholder */ --app-line: #E5E7EB; /* hairlines, card borders */ --app-line-2: #EEF0F3; /* sub‑hairlines */ /* === MARKETING (civic / brand register) === */ --brand-navy: #1B4F72; --brand-navy-hover: #163E5A; --brand-navy-tint: #D6EAF8; --brand-navy-deep: #0E2C42; --brand-orange: #E67E22; /* Frist! / Early‑Bird only */ --brand-orange-tint: #FDEBD0; --brand-orange-hover:#CA6D17; --page: #EBF0F5; --page-alt: #F2F6FA; --card: #FFFFFF; --text: #1C2833; --text-mute: #5D6D7E; --text-dim: #8895A1; /* === RISK & STATUS (shared) === */ --risk-high: #E74C3C; --risk-high-tint: #FDECEA; --risk-high-deep: #B33120; --risk-mid: #F39C12; --risk-mid-tint: #FEF3E2; --risk-mid-deep: #B57100; --risk-low: #27AE60; --risk-low-tint: #E8F6EE; --risk-low-deep: #1D7A43; --info: #2E86C1; --info-tint: #E6F1F9; /* === TYPE === */ --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace; /* Type scale — mobile defaults; marketing scales up via .marketing root */ --fs-xs: 11px; --fs-sm: 13px; --fs-base: 15px; --fs-md: 16px; --fs-lg: 18px; --fs-xl: 22px; --fs-2xl: 28px; --fs-3xl: 36px; --fs-4xl: 48px; --fs-5xl: 64px; --lh-tight: 1.15; --lh-snug: 1.3; --lh-base: 1.5; --lh-loose: 1.65; --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-eyebrow: 0.08em; /* === SPACING (8‑pt) === */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px; /* === RADII === */ --r-xs: 4px; --r-sm: 8px; --r-md: 12px; /* default card */ --r-lg: 16px; /* primary buttons, hero cards */ --r-xl: 20px; --r-pill: 999px; --r-app-icon: 22%; /* iOS app icon squircle */ /* === SHADOWS === */ --sh-0: 0 0 0 1px var(--app-line); /* hairline (use as shadow when border can't) */ --sh-1: 0 1px 2px rgba(15,17,21,.04), 0 4px 12px rgba(15,17,21,.04); --sh-2: 0 8px 24px rgba(15,17,21,.08); --sh-3: 0 16px 48px rgba(15,17,21,.12); --sh-focus-app: 0 0 0 3px rgba(15,17,21,.13); --sh-focus-brand: 0 0 0 3px var(--brand-navy-tint); /* === MOTION === */ --ease-standard: cubic-bezier(.2,.8,.2,1); --ease-out: cubic-bezier(0,0,.2,1); --dur-fast: 80ms; --dur-base: 200ms; --dur-slow: 400ms; } /* ========================================================= Base reset (light, opt‑in via .ds-reset on or ) ========================================================= */ .ds-reset, .ds-reset *, .ds-reset *::before, .ds-reset *::after { box-sizing: border-box; } .ds-reset { font-family: var(--font-sans); font-size: var(--fs-base); line-height: var(--lh-base); color: var(--text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-feature-settings: "ss01", "cv11"; } .ds-reset h1, .ds-reset h2, .ds-reset h3, .ds-reset h4, .ds-reset p { margin: 0; } /* ========================================================= Semantic type classes — use these in any artifact ========================================================= */ /* Display (hero) */ .ds-display { font-family: var(--font-sans); font-weight: 700; font-size: clamp(40px, 5.6vw, var(--fs-5xl)); line-height: 1.05; letter-spacing: var(--tracking-tight); color: var(--text); } /* Headings */ .ds-h1 { font: 700 var(--fs-2xl)/var(--lh-tight) var(--font-sans); letter-spacing: -0.015em; color: var(--app-ink-2); } .ds-h2 { font: 600 var(--fs-xl)/var(--lh-snug) var(--font-sans); letter-spacing: -0.01em; color: var(--app-ink-2); } .ds-h3 { font: 600 var(--fs-lg)/var(--lh-snug) var(--font-sans); color: var(--app-ink-2); } .ds-h4 { font: 600 var(--fs-md)/var(--lh-snug) var(--font-sans); color: var(--app-ink-2); } /* Body */ .ds-body { font: 400 var(--fs-base)/var(--lh-base) var(--font-sans); color: var(--text); } .ds-body-sm{ font: 400 var(--fs-sm)/var(--lh-base) var(--font-sans); color: var(--text); } .ds-lead { font: 400 var(--fs-lg)/var(--lh-base) var(--font-sans); color: var(--text); } /* Eyebrow / label — UPPERCASE TRACKED. Used for AKTENZEICHEN, ZUSAMMENFASSUNG, LETZTE BRIEFE, etc. */ .ds-eyebrow { font: 600 var(--fs-xs)/1 var(--font-sans); text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); color: var(--app-ink-3); } /* Muted secondary */ .ds-muted { color: var(--text-mute); } .ds-dim { color: var(--text-dim); } /* Mono — Aktenzeichen / case numbers */ .ds-mono { font-family: var(--font-mono); font-size: var(--fs-base); letter-spacing: 0; } /* Numeric — countdowns ("15 Tage verbleibend") */ .ds-numeric { font-variant-numeric: tabular-nums; } /* Link */ .ds-link { color: var(--brand-navy); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; } .ds-link:hover { color: var(--brand-navy-hover); }