/* Deecke Systems — brand tokens (portable, framework-agnostic). Source of truth: brand-pack.html (locked) + BRAND-NOTES.md in this folder. Drop this file in, then use var(--ink), var(--accent), etc. directly — no build step required. Toggle dark mode with , or it falls back to prefers-color-scheme automatically. */ :root { --bg: #ffffff; --panel: #f7f8fa; --panel-2: #f3f4f6; --card: #ffffff; --border: #e5e7eb; --border-strong: #d1d5db; --ink: #111827; --ink-2: #374151; --muted: #6b7280; --faint: #9ca3af; --accent: #2f52c4; --accent-ink: #1e3a99; /* pressed/hover */ --accent-tint: color-mix(in srgb, var(--accent) 12%, var(--bg)); /* focus bg only */ --code-bg: #f3f4f6; --code-ink: #1f2937; --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-display: "Newsreader", Georgia, serif; --font-mono: "IBM Plex Mono", "SF Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } html[data-theme="dark"] { --bg: #030712; --panel: #0b1120; --panel-2: #111827; --card: #0f172a; --border: #1f2937; --border-strong: #374151; --ink: #f9fafb; --ink-2: #e5e7eb; --muted: #9ca3af; --faint: #6b7280; --accent: #8ea6ef; --accent-ink: #8ea6ef; /* pack doesn't specify a separate dark pressed/hover — see BRAND-NOTES.md */ --code-bg: #111827; --code-ink: #e5e7eb; } @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) { --bg: #030712; --panel: #0b1120; --panel-2: #111827; --card: #0f172a; --border: #1f2937; --border-strong: #374151; --ink: #f9fafb; --ink-2: #e5e7eb; --muted: #9ca3af; --faint: #6b7280; --accent: #8ea6ef; --accent-ink: #8ea6ef; --code-bg: #111827; --code-ink: #e5e7eb; } } @font-face { font-family: "Newsreader"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("./fonts/newsreader/newsreader-variable.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("./fonts/ibm-plex-mono/ibm-plex-mono-400.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("./fonts/ibm-plex-mono/ibm-plex-mono-500.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 600; font-display: swap; src: url("./fonts/ibm-plex-mono/ibm-plex-mono-600.woff2") format("woff2"); } body { background: var(--bg); color: var(--ink); font-family: var(--font-sans); line-height: 1.55; }