/* Design tokens + theming for episteme. Ported from Daily Cleaners (tasks/design/ds/colors_and_type.css). Type: Epilogue (body/UI, local @font-face) + Oswald (display, Google Fonts). Self-hosting Oswald is a later follow-up. */ @import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&display=swap'); @font-face { font-family: 'Epilogue'; font-style: normal; font-weight: 100; font-display: swap; src: url('/static/fonts/Epilogue-Thin.ttf') format('truetype'); } @font-face { font-family: 'Epilogue'; font-style: italic; font-weight: 100; font-display: swap; src: url('/static/fonts/Epilogue-ThinItalic.ttf') format('truetype'); } @font-face { font-family: 'Epilogue'; font-style: normal; font-weight: 200; font-display: swap; src: url('/static/fonts/Epilogue-ExtraLight.ttf') format('truetype'); } @font-face { font-family: 'Epilogue'; font-style: italic; font-weight: 200; font-display: swap; src: url('/static/fonts/Epilogue-ExtraLightItalic.ttf') format('truetype'); } @font-face { font-family: 'Epilogue'; font-style: normal; font-weight: 300; font-display: swap; src: url('/static/fonts/Epilogue-Light.ttf') format('truetype'); } @font-face { font-family: 'Epilogue'; font-style: italic; font-weight: 300; font-display: swap; src: url('/static/fonts/Epilogue-LightItalic.ttf') format('truetype'); } @font-face { font-family: 'Epilogue'; font-style: normal; font-weight: 400; font-display: swap; src: url('/static/fonts/Epilogue-Regular.ttf') format('truetype'); } @font-face { font-family: 'Epilogue'; font-style: italic; font-weight: 400; font-display: swap; src: url('/static/fonts/Epilogue-Italic.ttf') format('truetype'); } @font-face { font-family: 'Epilogue'; font-style: normal; font-weight: 500; font-display: swap; src: url('/static/fonts/Epilogue-Medium.ttf') format('truetype'); } @font-face { font-family: 'Epilogue'; font-style: italic; font-weight: 500; font-display: swap; src: url('/static/fonts/Epilogue-MediumItalic.ttf') format('truetype'); } @font-face { font-family: 'Epilogue'; font-style: normal; font-weight: 600; font-display: swap; src: url('/static/fonts/Epilogue-SemiBold.ttf') format('truetype'); } @font-face { font-family: 'Epilogue'; font-style: italic; font-weight: 600; font-display: swap; src: url('/static/fonts/Epilogue-SemiBoldItalic.ttf') format('truetype'); } @font-face { font-family: 'Epilogue'; font-style: normal; font-weight: 700; font-display: swap; src: url('/static/fonts/Epilogue-Bold.ttf') format('truetype'); } @font-face { font-family: 'Epilogue'; font-style: italic; font-weight: 700; font-display: swap; src: url('/static/fonts/Epilogue-BoldItalic.ttf') format('truetype'); } @font-face { font-family: 'Epilogue'; font-style: normal; font-weight: 800; font-display: swap; src: url('/static/fonts/Epilogue-ExtraBold.ttf') format('truetype'); } @font-face { font-family: 'Epilogue'; font-style: italic; font-weight: 800; font-display: swap; src: url('/static/fonts/Epilogue-ExtraBoldItalic.ttf') format('truetype'); } @font-face { font-family: 'Epilogue'; font-style: normal; font-weight: 900; font-display: swap; src: url('/static/fonts/Epilogue-Black.ttf') format('truetype'); } @font-face { font-family: 'Epilogue'; font-style: italic; font-weight: 900; font-display: swap; src: url('/static/fonts/Epilogue-BlackItalic.ttf') format('truetype'); } :root { /* ---------- Raw brand tokens ---------- */ --dc-blue: #14A2F1; --dc-blue-light: #4DA1FE; --dc-blue-deep: #0055FF; --dc-blue-50: #DBEAFE; --dc-surface-page: #F8F9FA; --dc-surface-card: #FFFFFF; --dc-surface-mute: #F4F4F5; --dc-surface-border: #F1F5F9; --dc-ink-1: #0F172A; --dc-ink-2: #1E293B; --dc-ink-3: #475569; --dc-ink-4: #64748B; --dc-ink-5: #94A3B8; --dc-ink-on-blue: #FFFFFF; --dc-slate-100: #E2E8F0; --dc-slate-200: #CBD5E1; /* ---------- Type families ---------- */ --dc-font-display: 'Oswald', 'Helvetica Neue', Arial, sans-serif; --dc-font-body: 'Epilogue', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --dc-font-mono: ui-monospace, SFMono-Regular, Menlo, monospace; /* ---------- Spacing ---------- */ --dc-space-1: 4px; --dc-space-2: 8px; --dc-space-3: 12px; --dc-space-4: 16px; --dc-space-5: 24px; --dc-space-6: 32px; --dc-space-7: 40px; --dc-space-8: 48px; /* ---------- Radius ---------- */ --dc-radius-xs: 4px; --dc-radius-sm: 8px; --dc-radius-md: 12px; --dc-radius-lg: 16px; --dc-radius-xl: 40px; --dc-radius-pill: 100px; /* ---------- Shadow ---------- */ --dc-shadow-card: 0 2px 4px -1px rgba(0,0,0,0.03), 0 4px 20px -2px rgba(0,0,0,0.05); --dc-shadow-button: 0 1px 2px 0 rgba(0,0,0,0.05); /* ---------- Motion ---------- */ --dc-ease: cubic-bezier(0.4, 0, 0.2, 1); --dc-dur-fast: 150ms; --dc-dur-base: 200ms; --dc-dur-slow: 300ms; /* ---------- Semantic vars (defaults = Signal; themes override below) ---------- */ --font-body: var(--dc-font-body); --font-display: var(--dc-font-display); --font-mono: var(--dc-font-mono); --font-wordmark: 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Noto Sans', sans-serif; --page: var(--dc-surface-page); --card: var(--dc-surface-card); --border: var(--dc-surface-border); --border-strong: var(--dc-slate-100); --ink-1: var(--dc-ink-1); --ink-2: var(--dc-ink-2); --ink-3: var(--dc-ink-3); --muted: var(--dc-ink-4); --accent: var(--dc-blue); --accent-tint: rgba(20, 162, 241, 0.10); --rail-bg: var(--dc-ink-1); --rail-ink: #FFFFFF; --rail-ink-2: var(--dc-slate-100); --rail-muted: var(--dc-ink-4); --rail-label: var(--dc-ink-3); --rail-field-bg: rgba(255, 255, 255, 0.08); --rail-hover: rgba(255, 255, 255, 0.06); --rail-active-bg: rgba(20, 162, 241, 0.16); --rail-active-ink:#FFFFFF; --rail-accent: var(--dc-blue); --rail-border: rgba(255, 255, 255, 0.07); --btn-primary-bg: var(--dc-ink-1); --btn-primary-ink: #FFFFFF; --btn-primary-hover: #1E293B; --danger: #DC2626; --danger-ink: #FFFFFF; --danger-hover: #B91C1C; /* ---------- Per-screen semantic vars (defaults = Signal) ---------- */ --hero-bg: var(--dc-blue); --hero-glow: rgba(0, 85, 255, 0.5); --hero-ink: #FFFFFF; --hero-ink-soft: rgba(255, 255, 255, 0.85); --hero-pill-bg: rgba(255, 255, 255, 0.16); --lock-bg: #FEF6E0; --lock-border: #F7E4B0; --lock-ink: #92700A; --toolbar-bg: var(--dc-ink-1); --toolbar-ink: var(--dc-slate-200); --toolbar-btn-bg: rgba(255, 255, 255, 0.06); --toolbar-muted: var(--dc-ink-4); --source-bg: #0B1220; --source-ink: var(--dc-slate-200); --source-gutter: var(--dc-ink-2); --source-line: var(--dc-ink-3); --code-chip-bg: var(--dc-surface-border); --code-chip-ink: #0D6EA8; --tag-solid-bg: var(--dc-blue); --tag-solid-ink: #FFFFFF; --login-panel-bg: var(--dc-blue); --login-glow-1: rgba(0, 85, 255, 0.55); --login-glow-2: rgba(77, 161, 254, 0.45); --perm-header-bg: var(--dc-ink-1); --perm-header-ink:#FFFFFF; --perm-rw-bg: var(--dc-blue); --perm-rw-ink: #FFFFFF; --perm-r-bg: #DBF3EC; --perm-r-ink: #0F766E; --perm-none-ink: var(--dc-slate-200); --brand-mark-bg: #FFFFFF; --brand-mark-dot: var(--accent); --rail-kbd-bg: rgba(255, 255, 255, 0.1); --rail-kbd-ink: var(--rail-ink-2); --hero-btn-bg: #FFFFFF; --hero-btn-ink: var(--dc-ink-1); --hero-dot: #FFFFFF; --toolbar-border: transparent; --toolbar-btn-hover: rgba(255, 255, 255, 0.12); --source-active-line:rgba(255, 255, 255, 0.04); } [data-theme="signal"] { --rail-bg: var(--dc-ink-1); --rail-ink: #FFFFFF; --rail-active-bg: rgba(20, 162, 241, 0.16); --rail-active-ink:#FFFFFF; --rail-accent: var(--dc-blue); --btn-primary-bg: var(--dc-ink-1); --btn-primary-ink: #FFFFFF; --btn-primary-hover: #1E293B; } /* Clean Blue — light rail, white document header, blue-as-accent. Same DOM as Signal. */ [data-theme="clean-blue"] { --rail-bg: var(--dc-surface-card); --rail-ink: var(--dc-ink-1); --rail-ink-2: var(--dc-ink-3); --rail-muted: var(--dc-ink-4); --rail-label: var(--dc-ink-4); --rail-field-bg: var(--dc-surface-mute); --rail-hover: var(--dc-surface-border); --rail-active-bg: #EAF6FE; --rail-active-ink:#0D6EA8; --rail-accent: var(--dc-blue); --rail-border: var(--dc-surface-border); --rail-kbd-bg: var(--dc-surface-border); --rail-kbd-ink: var(--dc-ink-3); --brand-mark-bg: var(--dc-blue); --brand-mark-dot: #FFFFFF; --btn-primary-bg: var(--dc-blue); --btn-primary-ink: #FFFFFF; --btn-primary-hover: #0E8FDA; --hero-bg: transparent; --hero-glow: transparent; --hero-ink: var(--dc-ink-1); --hero-ink-soft: var(--dc-ink-4); --hero-pill-bg: var(--dc-surface-border); --hero-dot: var(--dc-blue); --hero-btn-bg: var(--dc-blue); --hero-btn-ink: #FFFFFF; --lock-bg: #EAF6FE; --lock-border: #BBE3FB; --lock-ink: #0D6EA8; --toolbar-bg: var(--dc-surface-mute); --toolbar-ink: var(--dc-ink-3); --toolbar-btn-bg: var(--dc-surface-card); --toolbar-muted: var(--dc-ink-4); --toolbar-border: var(--dc-slate-100); --toolbar-btn-hover: var(--dc-surface-border); --source-bg: #F8FAFC; --source-ink: var(--dc-ink-2); --source-gutter: var(--dc-slate-100); --source-line: var(--dc-ink-4); --source-active-line: rgba(15, 23, 42, 0.04); --perm-header-bg: #EAF6FE; --perm-header-ink:var(--dc-ink-1); }