/* ============================================================================ * HaloPulse Design Tokens (Phase 1.7.5) * * Source of truth for color, typography, spacing, radius, and touch targets. * Loaded BEFORE halopulse.css in base.html so all downstream styles reference * these variables. * * Theme model: * - Default (no data-theme attr OR data-theme="light"): light palette. * - data-theme="dark" on : dark palette. * - data-theme="auto" is reserved for a future prefers-color-scheme * implementation; the UI currently exposes only light/dark. * * Naming convention follows GitHub Primer's intent: * bg-* background surfaces * text-* foreground text * border-* dividers/outlines * accent-* primary brand action (blue) * success/danger/warning-* semantic status * *-fg the on-canvas variant (e.g. link text, icon) * *-emphasis the solid/filled variant (e.g. button background) * ========================================================================= */ /* --------------------------------------------------------------------------- * Dark theme — applied when . * ------------------------------------------------------------------------ */ :root[data-theme="dark"] { /* Surfaces */ --bg-canvas: #0d1117; /* page background */ --bg-subtle: #161b22; /* cards, panels */ --bg-emphasis: #21262d; /* raised elements within cards */ --bg-inset: #010409; /* recessed: inputs, code blocks */ /* Borders */ --border-default: #30363d; /* primary divider */ --border-muted: #21262d; /* softer dividers within cards */ --border-strong: #484f58; /* high-contrast outline (bordered groups) */ /* Text */ --text-primary: #e6edf3; /* body, headings */ --text-secondary: #7d8590; /* labels, captions, metadata */ --text-on-emphasis: #ffffff; /* text on filled buttons / pills */ /* Accent — primary brand action (blue) */ --accent-fg: #2f81f7; /* links, primary text accent */ --accent-emphasis: #1f6feb; /* filled primary button background */ /* Semantic status */ --success-fg: #3fb950; --success-emphasis: #238636; --danger-fg: #f85149; --danger-emphasis: #da3633; --warning-fg: #d29922; --warning-emphasis: #9e6a03; /* Focus ring (accessibility) */ --focus-ring: #2f81f7; } /* --------------------------------------------------------------------------- * Light theme — default. Applied when no data-theme attribute is present * OR when data-theme="light". * ------------------------------------------------------------------------ */ :root, :root[data-theme="light"] { /* Surfaces */ --bg-canvas: #ffffff; --bg-subtle: #f6f8fa; --bg-emphasis: #eaeef2; --bg-inset: #f6f8fa; /* Borders */ --border-default: #d0d7de; --border-muted: #d8dee4; --border-strong: #cdd1d6; /* high-contrast outline (bordered groups) */ /* Text */ --text-primary: #1f2328; --text-secondary: #59636e; --text-on-emphasis: #ffffff; /* Accent */ --accent-fg: #0969da; --accent-emphasis: #0969da; /* Semantic status */ --success-fg: #1a7f37; --success-emphasis: #1f883d; --danger-fg: #cf222e; --danger-emphasis: #cf222e; --warning-fg: #9a6700; --warning-emphasis: #bf8700; /* Focus ring */ --focus-ring: #0969da; } /* --------------------------------------------------------------------------- * Typography — theme-independent * ------------------------------------------------------------------------ */ :root { /* Font stacks */ --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; /* Type scale — base 16px. Keep input/select font-size ≥16px to prevent * iOS Safari auto-zoom on focus. */ --font-size-xs: 0.75rem; /* 12px fine print, badge labels */ --font-size-sm: 0.875rem; /* 14px secondary text, captions */ --font-size-base: 1rem; /* 16px body */ --font-size-lg: 1.125rem; /* 18px emphasized body */ --font-size-xl: 1.25rem; /* 20px h4 */ --font-size-2xl: 1.5rem; /* 24px h3 */ --font-size-3xl: 1.875rem; /* 30px h2 */ --font-size-4xl: 2.25rem; /* 36px h1 */ /* Line heights */ --line-height-tight: 1.25; --line-height-normal: 1.5; --line-height-relaxed: 1.625; /* Font weights */ --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; } /* --------------------------------------------------------------------------- * Spacing — 4px base unit, theme-independent * ------------------------------------------------------------------------ */ :root { --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ } /* --------------------------------------------------------------------------- * Radius — theme-independent * ------------------------------------------------------------------------ */ :root { --radius-sm: 3px; /* small inline elements (badges, tags) */ --radius-md: 6px; /* cards, buttons, inputs (locked design choice) */ --radius-lg: 8px; /* modals, large panels */ --radius-full: 9999px; /* pills, circular avatars */ } /* --------------------------------------------------------------------------- * Touch targets — Apple HIG minimum (locked decision D11) * ------------------------------------------------------------------------ */ :root { --touch-target-min: 44px; } /* --------------------------------------------------------------------------- * Breakpoints — REFERENCE ONLY. * * CSS custom properties cannot be used inside @media queries. These values * are duplicated as literals in halopulse.css media queries. If you change * one, change both. * * --bp-sm: 640px large phones * --bp-md: 768px tablet portrait * --bp-lg: 1024px tablet landscape / laptops * --bp-xl: 1280px desktops * ------------------------------------------------------------------------ */