/** * Design tokens — semantic names stay stable; theme blocks swap values. * Set data-theme on to switch themes (default: github). */ /* ── Shared structural tokens (theme-independent) ── */ :root { --font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; --font-family-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --shadow-sm: 0 1px 0 rgba(31, 35, 40, 0.04); --shadow-md: 0 3px 6px rgba(140, 149, 159, 0.15); --shadow-lg: 0 8px 24px rgba(140, 149, 159, 0.2); --focus-ring: 0 0 0 3px var(--color-accent-muted); --control-height: 2rem; --control-height-lg: 2.5rem; --control-padding-x: 0.75rem; --font-size-body: 0.875rem; --font-size-small: 0.8125rem; --font-size-h2: 1.5rem; } /* ── GitHub Light (default) ── */ :root, [data-theme="github"] { /* Canvas */ --color-canvas-default: #ffffff; --color-canvas-subtle: #f6f8fa; --color-canvas-inset: #f6f8fa; --color-canvas-overlay: #ffffff; /* Foreground */ --color-fg-default: #1f2328; --color-fg-muted: #656d76; --color-fg-subtle: #6e7781; --color-fg-on-emphasis: #ffffff; /* Borders */ --color-border-default: #d0d7de; --color-border-muted: #d8dee4; --color-border-emphasis: #818b98; /* Accent (links, focus) */ --color-accent-fg: #0969da; --color-accent-emphasis: #0969da; --color-accent-emphasis-hover: #0860ca; --color-accent-muted: rgba(9, 105, 218, 0.4); /* Primary actions (GitHub green buttons) */ --color-btn-primary-bg: #1f883d; --color-btn-primary-hover: #1a7f37; --color-btn-primary-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25); /* Secondary / neutral buttons */ --color-btn-neutral-bg: #f6f8fa; --color-btn-neutral-hover: #eef1f4; --color-btn-neutral-border: #d0d7de; /* Semantic */ --color-success-fg: #1a7f37; --color-success-bg: #dafbe1; --color-success-border: #4ac26b; --color-danger-fg: #d1242f; --color-danger-bg: #ffebe9; --color-danger-border: #ff8182; --color-warning-fg: #9a6700; --color-warning-bg: #fff8c5; --color-warning-border: #d4a72c; --color-info-fg: #0969da; --color-info-bg: #ddf4ff; --color-info-border: #54aeff; /* Code blocks */ --color-code-bg: #0d1117; --color-code-fg: #c9d1d9; --color-code-comment: #8b949e; --color-code-keyword: #ff7b72; --color-code-string: #a5d6ff; --color-code-function: #d2a8ff; --color-code-type: #79c0ff; /* Badges */ --color-badge-apk-bg: #ccfbf1; --color-badge-apk-fg: #0f766e; --color-badge-apk-border: #5eead4; --color-badge-firmware-bg: #ffedd5; --color-badge-firmware-fg: #9a3412; --color-badge-firmware-border: #fdba74; /* Legacy aliases (used in existing templates) */ --color-bg: var(--color-canvas-default); --color-text: var(--color-fg-default); --color-text-secondary: var(--color-fg-muted); --color-border: var(--color-border-default); --color-primary: var(--color-accent-emphasis); --color-primary-hover: var(--color-accent-emphasis-hover); --color-secondary: var(--color-canvas-subtle); --color-accent: var(--color-accent-emphasis); --font-mono: var(--font-family-mono); /* Bootstrap bridge */ --bs-body-bg: var(--color-canvas-default); --bs-body-color: var(--color-fg-default); --bs-border-color: var(--color-border-default); --bs-link-color: var(--color-accent-fg); --bs-link-hover-color: var(--color-accent-emphasis-hover); --bs-primary: var(--color-btn-primary-bg); --bs-primary-rgb: 31, 136, 61; --bs-secondary: var(--color-canvas-subtle); --bs-secondary-color: var(--color-fg-muted); --bs-success: var(--color-success-fg); --bs-danger: var(--color-danger-fg); --bs-warning: var(--color-warning-fg); --bs-info: var(--color-info-fg); --bs-font-sans-serif: var(--font-family-base); --bs-border-radius: var(--radius-sm); --bs-border-radius-sm: var(--radius-sm); --bs-border-radius-lg: var(--radius-md); } /* ── GitHub Dark (future-ready) ── */ [data-theme="github-dark"] { --color-canvas-default: #0d1117; --color-canvas-subtle: #161b22; --color-canvas-inset: #010409; --color-canvas-overlay: #161b22; --color-fg-default: #e6edf3; --color-fg-muted: #8b949e; --color-fg-subtle: #6e7681; --color-fg-on-emphasis: #ffffff; --color-border-default: #30363d; --color-border-muted: #21262d; --color-border-emphasis: #6e7681; --color-accent-fg: #4493f8; --color-accent-emphasis: #4493f8; --color-accent-emphasis-hover: #58a6ff; --color-accent-muted: rgba(56, 139, 253, 0.4); --color-btn-primary-bg: #238636; --color-btn-primary-hover: #2ea043; --color-btn-primary-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1); --color-btn-neutral-bg: #21262d; --color-btn-neutral-hover: #30363d; --color-btn-neutral-border: #30363d; --color-success-fg: #3fb950; --color-success-bg: rgba(46, 160, 67, 0.15); --color-success-border: rgba(46, 160, 67, 0.4); --color-danger-fg: #f85149; --color-danger-bg: rgba(248, 81, 73, 0.15); --color-danger-border: rgba(248, 81, 73, 0.4); --color-warning-fg: #d29922; --color-warning-bg: rgba(187, 128, 9, 0.15); --color-warning-border: rgba(187, 128, 9, 0.4); --color-info-fg: #58a6ff; --color-info-bg: rgba(56, 139, 253, 0.15); --color-info-border: rgba(56, 139, 253, 0.4); --color-code-bg: #010409; --color-code-fg: #e6edf3; --color-code-comment: #8b949e; --color-code-keyword: #ff7b72; --color-code-string: #a5d6ff; --color-code-function: #d2a8ff; --color-code-type: #79c0ff; --color-badge-apk-bg: rgba(63, 185, 80, 0.15); --color-badge-apk-fg: #3fb950; --color-badge-apk-border: rgba(63, 185, 80, 0.4); --color-badge-firmware-bg: rgba(210, 153, 34, 0.15); --color-badge-firmware-fg: #d29922; --color-badge-firmware-border: rgba(210, 153, 34, 0.4); --color-bg: var(--color-canvas-default); --color-text: var(--color-fg-default); --color-text-secondary: var(--color-fg-muted); --color-border: var(--color-border-default); --color-primary: var(--color-accent-emphasis); --color-primary-hover: var(--color-accent-emphasis-hover); --color-secondary: var(--color-canvas-subtle); --color-accent: var(--color-accent-emphasis); --bs-body-bg: var(--color-canvas-default); --bs-body-color: var(--color-fg-default); --bs-border-color: var(--color-border-default); --bs-link-color: var(--color-accent-fg); --bs-link-hover-color: var(--color-accent-emphasis-hover); --bs-primary: var(--color-btn-primary-bg); --bs-primary-rgb: 35, 134, 54; --bs-secondary: var(--color-canvas-subtle); --bs-secondary-color: var(--color-fg-muted); --bs-success: var(--color-success-fg); --bs-danger: var(--color-danger-fg); --bs-warning: var(--color-warning-fg); --bs-info: var(--color-info-fg); --shadow-sm: 0 1px 0 rgba(0, 0, 0, 0.2); --shadow-md: 0 3px 6px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); }