/* ───────────────────────────────────────────────────────────────────────────── Delurk Design System — Colors & Typography Translated from design/tokens.dart and design/theme.dart ───────────────────────────────────────────────────────────────────────────── */ /* JetBrains Mono — variable weight axis (wght 100..800). Path is relative to this CSS file; consumers in subfolders pick this up automatically because the URL is resolved from the stylesheet's location. */ @font-face { font-family: "JetBrains Mono"; src: url("fonts/JetBrainsMono-VariableFont_wght.ttf") format("truetype-variations"), url("fonts/JetBrainsMono-VariableFont_wght.ttf") format("truetype"); font-weight: 100 800; font-style: normal; font-display: swap; } /* Alias used by the original Flutter token (`'JetBrainsMono'`, no space). */ @font-face { font-family: "JetBrainsMono"; src: url("fonts/JetBrainsMono-VariableFont_wght.ttf") format("truetype-variations"), url("fonts/JetBrainsMono-VariableFont_wght.ttf") format("truetype"); font-weight: 100 800; font-style: normal; font-display: swap; } :root { /* ── Raw palette ──────────────────────────────────────────────── */ --d-purple: #6355e0; --d-red: #D50045; --d-dark: #1a1a2e; --d-white: #ffffff; --d-grey-1: #cecede; --d-grey-2: #b0b0c4; --d-grey-3: #a0a0b8; --d-grey-4: #8b8ba8; --d-text-1: #5a5a78; --d-text-2: #3a3a54; --d-amber-600: #c47a00; --d-amber-050: #faf6ef; --d-amber-100: #f0e4cc; --d-mauve-050: #f6f4f6; --d-mauve-100: #e8e4ea; --d-mauve-500: #9a8fa0; --d-bg: #f4f4f8; --d-surface: #ffffff; --d-surface-ended: #fafafc; --d-border-card: #ececf2; --d-border-scheduled:#f0ece0; --d-border-live: #f9b0c4; --d-border-live-screen:#e8899f; --d-disabled: #e8e8f0; /* ── Semantic — Brand ─────────────────────────────────────────── */ --d-color-primary: var(--d-purple); --d-color-live: var(--d-red); --d-color-up-next: #C48500; --d-color-up-next-dark: #A87100; --d-color-online: #0ea58a; /* ── Semantic — Text ──────────────────────────────────────────── */ --d-fg-heading: var(--d-dark); /* H1, big titles */ --d-fg-body: var(--d-text-2); /* default body */ --d-fg-secondary: var(--d-text-1); /* descriptive copy */ --d-fg-tertiary: var(--d-grey-3); /* metadata */ --d-fg-muted: var(--d-grey-4); /* secondary metadata, placeholder */ --d-fg-faint: var(--d-grey-2); /* timestamps, footnotes */ --d-fg-ghost: var(--d-grey-1); /* placeholders, hairline labels */ /* ── Semantic — Surfaces & subtle tints ──────────────────────── */ --d-bg-app: var(--d-bg); --d-bg-surface: var(--d-surface); --d-bg-ended: var(--d-surface-ended); --d-bg-disabled: var(--d-disabled); --d-bg-anon: var(--d-grey-1); --d-primary-muted: rgba(99,85,224,0.10); --d-primary-subtle: rgba(99,85,224,0.04); --d-primary-subtle-border:rgba(99,85,224,0.08); --d-live-subtle: rgba(213,0,69,0.06); --d-live-bg: rgba(213,0,69,0.04); --d-live-border: rgba(213,0,69,0.08); --d-live-tint: rgba(213,0,69,0.20); --d-online-subtle: rgba(14,165,138,0.05); --d-online-border: rgba(14,165,138,0.09); /* ── Semantic — Moderation ───────────────────────────────────── */ --d-warn: var(--d-amber-600); --d-warn-bg: var(--d-amber-050); --d-warn-border: var(--d-amber-100); --d-moderated-bg: var(--d-mauve-050); --d-moderated-border: var(--d-mauve-100); --d-moderated-text:var(--d-mauve-500); /* ── Borders ─────────────────────────────────────────────────── */ --d-border: var(--d-border-card); --d-border-scheduled: var(--d-border-scheduled); --d-border-live-card: var(--d-border-live); --d-border-live-screen-edge: var(--d-border-live-screen); --d-border-primary: #eeebff; /* ── Gradients ───────────────────────────────────────────────── */ --d-gradient-bg: linear-gradient(180deg, #ffffff 0%, var(--d-bg) 100%); --d-gradient-facilitator: linear-gradient(135deg, var(--d-purple) 0%, #9b8fef 100%); /* ── Typography stacks ───────────────────────────────────────── */ --d-font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Inter", "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif; --d-font-mono: "JetBrains Mono", "JetBrainsMono", "SF Mono", ui-monospace, Menlo, Consolas, monospace; /* ── Type scale (semantic — taken from theme.dart) ───────────── */ /* Page-level */ --d-type-page-title-size: 32px; --d-type-page-title-weight: 700; --d-type-page-title-tracking: -0.96px; --d-type-page-title-leading: 1.15; --d-type-page-subtitle-size: 16px; --d-type-page-subtitle-weight: 400; --d-type-page-subtitle-leading:1.5; /* Headings used across cards / detail views */ --d-type-topic-size: 21px; /* dictation card / topic card */ --d-type-topic-weight: 600; --d-type-topic-leading: 1.35; --d-type-card-title-size: 17px; --d-type-card-title-weight: 650; /* variation; falls back to 700 */ --d-type-card-title-leading: 1.35; --d-type-step-title-size: 16px; --d-type-step-title-weight: 650; --d-type-input-size: 19px; /* large iOS-style input */ --d-type-input-weight: 500; --d-type-body-size: 15px; /* default body */ --d-type-body-weight: 500; --d-type-body-leading: 1.55; --d-type-meta-size: 14px; /* meta text under cards */ --d-type-caption-size: 13px; /* timestamps, errors, hints */ /* The system's signature monospaced ALL-CAPS micro label */ --d-type-label-size: 12px; --d-type-label-weight: 700; --d-type-label-tracking:1.2px; /* Buttons / CTA */ --d-type-cta-size: 17px; --d-type-cta-weight: 700; --d-type-compact-size:15px; --d-type-compact-weight:700; /* ── Layout tokens ───────────────────────────────────────────── */ --d-screen-padding: 22px; --d-cta-height: 52px; --d-avatar-profile: 44px; --d-avatar-small: 24px; /* ── Radii ────────────────────────────────────────────────────── */ --d-radius-sm: 8px; --d-radius-lg: 12px; --d-radius-xl: 14px; --d-radius-card: 16px; --d-radius-card-lg: 18px; --d-radius-card-xl: 20px; --d-radius-pill: 100px; /* ── Shadows ──────────────────────────────────────────────────── */ --d-shadow-card: 0 1px 3px rgba(0,0,0,0.031), 0 2px 10px rgba(0,0,0,0.020); --d-shadow-card-soft: 0 1px 3px rgba(0,0,0,0.020), 0 2px 8px rgba(0,0,0,0.020); --d-shadow-card-ended: 0 1px 2px rgba(0,0,0,0.020); --d-shadow-card-live: 0 0 0 4px rgba(213,0,69,0.04), 0 4px 20px rgba(0,0,0,0.051); --d-shadow-card-live-soft: 0 1px 4px rgba(213,0,69,0.06), 0 4px 16px rgba(213,0,69,0.04); --d-shadow-button-purple: 0 4px 16px rgba(99,85,224,0.30), 0 1px 3px rgba(99,85,224,0.15); --d-shadow-button-purple-sm: 0 2px 10px rgba(99,85,224,0.25); --d-shadow-button-red: 0 4px 16px rgba(213,0,69,0.30), 0 1px 3px rgba(213,0,69,0.15); --d-shadow-button-sm: 0 1px 3px rgba(0,0,0,0.031); --d-shadow-avatar-profile: 0 1px 4px rgba(99,85,224,0.20); --d-shadow-focus-purple: 0 0 0 3px rgba(99,85,224,0.08), 0 1px 3px rgba(0,0,0,0.031); --d-shadow-focus-red: 0 0 0 3px rgba(213,0,69,0.06), 0 1px 3px rgba(0,0,0,0.031); --d-shadow-fab-idle: 0 3px 5px -1px rgba(0,0,0,0.20), 0 6px 10px rgba(0,0,0,0.14), 0 1px 18px rgba(0,0,0,0.12); --d-shadow-fab-active: 0 5px 5px -3px rgba(0,0,0,0.20), 0 8px 10px 1px rgba(0,0,0,0.14), 0 3px 14px 2px rgba(0,0,0,0.12); /* ── Frosted bar ──────────────────────────────────────────────── */ --d-frosted-bg: rgba(244,244,248,0.80); --d-frosted-blur: 12px; } /* ───────────────────────────────────────────────────────────────────────────── Base + semantic element styles ───────────────────────────────────────────────────────────────────────────── */ html, body { font-family: var(--d-font-sans); color: var(--d-fg-body); background: var(--d-bg-app); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, .d-h1, .d-page-title { font-family: var(--d-font-sans); font-size: var(--d-type-page-title-size); font-weight: var(--d-type-page-title-weight); letter-spacing: var(--d-type-page-title-tracking); line-height: var(--d-type-page-title-leading); color: var(--d-fg-heading); margin: 0; } h2, .d-h2 { font-family: var(--d-font-sans); font-size: 21px; font-weight: 600; line-height: 1.35; color: var(--d-fg-heading); margin: 0; } h3, .d-h3 { font-family: var(--d-font-sans); font-size: var(--d-type-card-title-size); font-weight: 700; line-height: var(--d-type-card-title-leading); color: var(--d-fg-heading); margin: 0; } p, .d-p { font-family: var(--d-font-sans); font-size: var(--d-type-body-size); font-weight: var(--d-type-body-weight); line-height: var(--d-type-body-leading); color: var(--d-fg-secondary); margin: 0; } .d-subtitle { font-size: var(--d-type-page-subtitle-size); color: var(--d-fg-muted); line-height: var(--d-type-page-subtitle-leading); } /* The signature monospaced micro-label — used for "STARTING", "LIVE NOW", "ENDED", input field labels, share-pill text, etc. */ .d-label { font-family: var(--d-font-mono); font-size: var(--d-type-label-size); font-weight: var(--d-type-label-weight); letter-spacing: var(--d-type-label-tracking); text-transform: uppercase; color: var(--d-fg-muted); } .d-meta { font-family: var(--d-font-sans); font-size: var(--d-type-meta-size); color: var(--d-fg-muted); } .d-caption, .d-timestamp { font-family: var(--d-font-mono); font-size: var(--d-type-caption-size); color: var(--d-fg-faint); } code, .d-code, .d-mono { font-family: var(--d-font-mono); font-size: 13px; color: var(--d-fg-faint); }