/* Source: edfy web stylesheet; imported 2026-09-10. */ :root { /* Core tone scale: dark to light */ --color-base-950: #050101; --color-base-900: #201212; --color-base-850: #2f1d1f; --color-base-800: #362525; --color-base-750: #493536; --color-base-700: #5c4b4b; --color-base-600: #7c6465; --color-base-500: #a18989; --color-base-400: #ad9999; --color-base-300: #bfa7a7; --color-base-200: #d1b6b6; --color-base-150: #f2e7ea; --color-base-100: #f3ece8; --color-base-75: #f8f3f1; --color-base-50: #fdf8f6; --color-base-25: #fefcfa; --color-base-0: #ffffff; /* Semantic palette mapped to the scale */ --color-bg: var(--color-base-75); --color-bg-muted: var(--color-base-50); --color-surface: var(--color-base-0); --color-surface-alt: var(--color-base-100); --color-primary: var(--color-base-300); --color-primary-strong: var(--color-base-500); --color-secondary: var(--color-base-200); --color-accent: var(--color-base-400); --color-highlight: var(--color-base-150); --color-text: var(--color-base-600); --color-text-strong: var(--color-base-850); --color-muted: var(--color-base-500); --color-border: var(--color-base-950); --color-border-light: rgba(47, 29, 31, 0.08); --color-success: #3a8f6b; --color-warning: #f2b04a; --color-danger: #c94848; /* Widget foundation: shell -> strip -> content -> card -> group -> control */ --widget-shell-bg: var(--color-base-25); --widget-shell-border-color: rgba(47, 29, 31, 0.06); --widget-shell-shadow: 0 24px 48px rgba(92, 75, 75, 0.12); --widget-strip-bg: linear-gradient(135deg, var(--color-base-700) 0%, var(--color-base-600) 100%); --widget-strip-divider-color: rgba(255, 255, 255, 0.12); --widget-strip-highlight: radial-gradient(circle at top right, rgba(255, 255, 255, 0.18), transparent 34%); --widget-strip-text: var(--color-base-0); --widget-strip-meta: rgba(255, 255, 255, 0.82); --widget-content-bg: linear-gradient(180deg, var(--color-base-25) 0%, var(--color-base-50) 100%); --widget-avatar-bg: rgba(255, 255, 255, 0.68); --widget-avatar-border-color: rgba(255, 255, 255, 0.72); --widget-avatar-shadow: 0 14px 28px rgba(92, 75, 75, 0.18); --widget-avatar-filter: blur(12px); --widget-card-bg: rgba(255, 255, 255, 0.58); --widget-card-border-color: rgba(255, 255, 255, 0.62); --widget-card-shadow: 0 18px 34px rgba(92, 75, 75, 0.1); --widget-card-filter: blur(14px); --widget-group-bg: rgba(255, 255, 255, 0.46); --widget-group-border-color: rgba(255, 255, 255, 0.6); --widget-group-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92), 0 10px 22px rgba(92, 75, 75, 0.08); --widget-group-filter: blur(12px); --widget-control-bg: rgba(255, 255, 255, 0.56); --widget-control-border-color: rgba(255, 255, 255, 0.72); --widget-control-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92), 0 8px 18px rgba(92, 75, 75, 0.08); --widget-control-filter: blur(12px); --widget-control-button-border-color: rgba(47, 29, 31, 0.2); --widget-control-button-shadow: 3px 3px 0 var(--widget-control-button-border-color); --widget-control-button-filter: none; --widget-title-color: var(--color-base-850); --widget-copy-color: var(--color-base-850); --widget-meta-color: var(--color-base-600); --widget-icon-color: var(--color-base-850); --widget-accent-color: var(--color-base-700); /* Modal foundation aligned with the widget system */ --modal-overlay-bg: rgba(47, 29, 31, 0.26); --modal-shell-bg: var(--widget-shell-bg); --modal-shell-border-color: var(--widget-shell-border-color); --modal-shell-shadow: var(--widget-shell-shadow); --modal-strip-bg: var(--widget-strip-bg); --modal-strip-divider-color: var(--widget-strip-divider-color); --modal-strip-highlight: var(--widget-strip-highlight); --modal-strip-text: var(--widget-strip-text); --modal-content-bg: var(--widget-content-bg); --modal-group-bg: var(--widget-group-bg); --modal-group-border-color: var(--widget-group-border-color); --modal-group-shadow: var(--widget-group-shadow); --modal-control-bg: var(--widget-control-bg); --modal-control-border-color: var(--widget-control-border-color); --modal-control-shadow: var(--widget-control-shadow); --modal-control-button-border-color: var(--widget-control-button-border-color); --modal-control-button-shadow: var(--widget-control-button-shadow); --modal-title-color: var(--widget-title-color); --modal-copy-color: var(--widget-copy-color); --modal-meta-color: var(--widget-meta-color); /* Typography */ --font-heading: 'Arial Rounded MT Bold', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* Schriftart 1: Arial Rounded MT Bold */ --font-body: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica', Arial, sans-serif; /* Schriftart 2: IBM Plex Sans */ /* Compatibility aliases: these still resolve to the two canonical fonts above. */ --font-display: var(--font-heading); --font-ui: var(--font-body); --font-meta: var(--font-body); --fs-h0: 2.5rem; /* 40px */ --fs-h1: 2rem; /* 32px */ --fs-h2: 1.5rem; /* 24px */ --fs-h3: 1.25rem; /* 20px */ --fs-h4: 1rem; /* 16px */ --fs-body-l: 1.25rem; /* 20px */ --fs-body-m: 1rem; /* 16px */ --fs-body-s: 0.75rem; /* 12px */ --fs-caption: 0.75rem;/* 12px */ --fs-link: 1rem; /* 16px */ --lh-tight: 1.2; --lh-normal: 1.3; --lh-loose: 1.45; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --font-size-base: 16px; --line-height-base: 1.4; /* Radii */ --radius-pill: 999px; --radius-lg: 1.75rem; --radius-md: 1.25rem; --radius-sm: 0.75rem; /* Shadows */ --shadow-xs: 1px 1px 0 rgba(0, 0, 0, 0.4); --shadow-sm: 2px 2px 0 #000; --shadow-md: 4px 4px 0 #000; --shadow-lg: 8px 8px 0 rgba(0, 0, 0, 0.25); /* Spacing scale */ --space-2: 0.125rem; --space-4: 0.25rem; --space-6: 0.375rem; --space-8: 0.5rem; --space-10: 0.625rem; --space-12: 0.75rem; --space-14: 0.875rem; --space-16: 1rem; --space-18: 1.125rem; --space-20: 1.25rem; --space-24: 1.5rem; --space-32: 2rem; --space-40: 2.5rem; --space-48: 3rem; /* Global spacing primitives for the Matryoshka / Null-Contact system */ --ui-null-contact-gap: var(--space-8); --ui-group-gap: var(--space-12); --ui-stack-gap: var(--space-16); --ui-group-inset: var(--space-14); --ui-group-compact-inset: var(--space-12); --ui-panel-inset: var(--space-16); --ui-card-inset: var(--space-20); --ui-label-inset-inline: var(--space-4); --ui-control-inset-y: var(--space-12); --ui-control-inset-x: var(--space-20); --ui-control-min-block-size: 2.75rem; --ui-layer-gap: var(--space-12); --ui-shadow-clearance: var(--space-8); --ui-select-adornment-divider-color: rgba(47, 29, 31, 0.08); --ui-select-adornment-divider-offset-inline: 2.45rem; --ui-select-adornment-chevron-offset-inline: 1.1rem; --ui-inline-divider-color: rgba(47, 29, 31, 0.08); --ui-inline-action-min-inline-size: 2rem; --ui-inline-action-pad-inline-start: var(--space-12); --ui-inline-action-hover-bg: rgba(47, 29, 31, 0.04); /* Layout */ --container-max: 1200px; --transition-base: 0.18s ease; }