/* ============================================ CancerBrief Design Tokens Clinical Signal Graphics + Editorial Techno-Brutalism ============================================ */ :root { color-scheme: light; /* --- Colors --- */ --color-bg: #f7f8f4; --color-ink: #121212; --color-surface: #ffffff; --color-surface-2: #edf2ef; --color-panel: #17181c; --color-panel-soft: #0f1013; --color-rule: #8f969b; --color-rule-soft: #d7ded9; --color-amber: #ff5d36; --color-cyan: #42d6c7; --color-disabled: #5f666c; --color-disabled-2: #adb6bb; --color-shadow: rgba(8, 12, 18, 0.10); /* --- Computed / glass tokens --- */ --color-bg-glass: rgba(247, 248, 244, 0.90); --color-bg-glass-hi: rgba(247, 248, 244, 0.96); --color-shadow-card: rgba(8, 12, 18, 0.30); --color-body-glow: rgba(255, 255, 255, 0.72); --_overlay-hi: rgba(255, 255, 255, 0.80); --_overlay-lo: rgba(255, 255, 255, 0.45); /* --- Typography --- */ --font-display: 'Outfit', 'Arial', sans-serif; --font-ui: 'IBM Plex Sans', 'Segoe UI', sans-serif; --font-mono: 'IBM Plex Mono', monospace; /* Display scale */ --text-hero: clamp(3.5rem, 10vw, 8rem); --text-h1: clamp(2.4rem, 6vw, 4rem); --text-h2: clamp(1.8rem, 3.5vw, 2.7rem); --text-h3: clamp(1.15rem, 2.4vw, 1.7rem); /* UI scale */ --text-body: 1rem; --text-sm: 0.875rem; --text-xs: 0.75rem; --text-label: 0.6875rem; /* Weights */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* Line heights */ --leading-tight: 1; --leading-snug: 1.2; --leading-normal: 1.6; /* Tracking */ --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.08em; --tracking-ultra: 0.2em; /* --- Spacing --- */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-8: 3rem; --space-10: 4rem; --space-12: 5rem; --space-16: 8rem; /* --- Borders --- */ --border-thin: 1px solid var(--color-rule); --border-medium: 2px solid var(--color-ink); --border-amber: 1px solid var(--color-amber); --border-cyan: 1px solid var(--color-cyan); --radius-none: 0; --radius-sm: 2px; /* --- Grid --- */ --grid-columns: 12; --grid-gutter: 1.5rem; --grid-margin: clamp(1rem, 4vw, 4rem); --grid-max-width: 1320px; /* --- Transitions --- */ --ease-default: cubic-bezier(0.2, 0.85, 0.2, 1); --duration-fast: 120ms; --duration-normal: 240ms; --duration-slow: 420ms; /* --- Z-index --- */ --z-nav: 100; --z-overlay: 200; --z-modal: 300; } /* ============================================ Dark Theme Applied by system preference or [data-theme="dark"] on ============================================ */ @media (prefers-color-scheme: dark) { :root { color-scheme: dark; --color-bg: #0f1013; --color-ink: #dde2de; --color-surface: #17181c; --color-surface-2: #1e2229; --color-panel: #252a31; --color-panel-soft: #1a1d22; --color-rule: #363c44; --color-rule-soft: #272c34; --color-disabled: #6b7580; --color-disabled-2: #454c54; --color-shadow: rgba(0, 0, 0, 0.35); --color-bg-glass: rgba(15, 16, 19, 0.90); --color-bg-glass-hi: rgba(15, 16, 19, 0.96); --color-shadow-card: rgba(0, 0, 0, 0.50); --color-body-glow: rgba(66, 214, 199, 0.04); --_overlay-hi: rgba(255, 255, 255, 0.04); --_overlay-lo: rgba(255, 255, 255, 0.01); } } /* Manual override — trumps media query */ [data-theme="dark"] { color-scheme: dark; --color-bg: #0f1013; --color-ink: #dde2de; --color-surface: #17181c; --color-surface-2: #1e2229; --color-panel: #252a31; --color-panel-soft: #1a1d22; --color-rule: #363c44; --color-rule-soft: #272c34; --color-disabled: #6b7580; --color-disabled-2: #454c54; --color-shadow: rgba(0, 0, 0, 0.35); --color-bg-glass: rgba(15, 16, 19, 0.90); --color-bg-glass-hi: rgba(15, 16, 19, 0.96); --color-shadow-card: rgba(0, 0, 0, 0.50); --color-body-glow: rgba(66, 214, 199, 0.04); --_overlay-hi: rgba(255, 255, 255, 0.04); --_overlay-lo: rgba(255, 255, 255, 0.01); } /* Force light — overrides system dark preference */ [data-theme="light"] { color-scheme: light; --color-bg: #f7f8f4; --color-ink: #121212; --color-surface: #ffffff; --color-surface-2: #edf2ef; --color-panel: #17181c; --color-panel-soft: #0f1013; --color-rule: #8f969b; --color-rule-soft: #d7ded9; --color-disabled: #5f666c; --color-disabled-2: #adb6bb; --color-shadow: rgba(8, 12, 18, 0.10); --color-bg-glass: rgba(247, 248, 244, 0.90); --color-bg-glass-hi: rgba(247, 248, 244, 0.96); --color-shadow-card: rgba(8, 12, 18, 0.30); --color-body-glow: rgba(255, 255, 255, 0.72); --_overlay-hi: rgba(255, 255, 255, 0.80); --_overlay-lo: rgba(255, 255, 255, 0.45); }