/* Freeside brand skin for Vocs - single mode (dark), dashboard tokens. vocs 2.x has no theme config: the runtime inlines defaults on , so the brand lands here with !important (author-important beats inline). */ @import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap"); @font-face { font-family: "Basement Grotesque"; src: url("/fonts/BasementGrotesque-Black.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; } :root { /* One mode: every light-dark() in vocs resolves to its dark arm. */ color-scheme: dark !important; /* Accent: phosphor (dashboard primary action color). */ --vocs-color-accent: oklch(0.7 0.09 123.1) !important; /* Type: IBM Plex, same as the dashboard. */ --vocs-font-family: "IBM Plex Sans", system-ui, sans-serif !important; --vocs-font-family-mono: "IBM Plex Mono", ui-monospace, monospace !important; /* Surfaces: the void ladder (cool blue-gray, hue 226.8). */ --color-gray1: oklch(0.2 0.032 226.8) !important; --color-gray2: oklch(0.226 0.034 226.8) !important; /* page bg = void-base */ --color-gray3: oklch(0.245 0.035 226.8) !important; --color-gray4: oklch(0.262 0.036 226.8) !important; /* void-raised */ --color-gray5: oklch(0.29 0.037 226.8) !important; /* card */ --color-gray6: oklch(0.36 0.04 226.8) !important; /* void-border */ /* Text: the bone ladder (warm gray, hue 84). */ --color-gray7: oklch(0.46 0.01 84) !important; /* bone-ghost */ --color-gray8: oklch(0.55 0.011 84) !important; --color-gray9: oklch(0.62 0.012 84) !important; /* bone-muted */ --color-gray10: oklch(0.72 0.013 84) !important; --color-gray11: oklch(0.797 0.014 82.4) !important; /* bone-dim */ --color-gray12: oklch(0.9 0.015 84) !important; --color-gray13: oklch(0.96 0.017 84.6) !important; /* bone-base */ --color-gray14: oklch(0.975 0.012 84.6) !important; /* bone-bright */ /* Semantic hues aligned to the dashboard's palette. */ --color-blue: oklch(0.71 0.08 222.8) !important; /* cyan-base */ --color-green: oklch(0.7 0.09 123.1) !important; /* phosphor-bright */ --color-yellow: oklch(0.8 0.14 84.1) !important; /* vocs user hooks (--vocs-color-*) - the semantic layer reads THESE. */ --vocs-color-gray1: oklch(0.2 0.032 226.8); --vocs-color-gray2: oklch(0.226 0.034 226.8); --vocs-color-gray3: oklch(0.245 0.035 226.8); --vocs-color-gray4: oklch(0.262 0.036 226.8); --vocs-color-gray5: oklch(0.29 0.037 226.8); --vocs-color-gray6: oklch(0.36 0.04 226.8); --vocs-color-gray7: oklch(0.46 0.01 84); --vocs-color-gray8: oklch(0.55 0.011 84); --vocs-color-gray9: oklch(0.62 0.012 84); --vocs-color-gray10: oklch(0.72 0.013 84); --vocs-color-gray11: oklch(0.797 0.014 82.4); --vocs-color-gray12: oklch(0.9 0.015 84); --vocs-color-gray13: oklch(0.96 0.017 84.6); --vocs-color-gray14: oklch(0.975 0.012 84.6); --vocs-color-gray: oklch(0.62 0.012 84); --vocs-color-blue: oklch(0.71 0.08 222.8); --vocs-color-green: oklch(0.7 0.09 123.1); --vocs-color-yellow: oklch(0.8 0.14 84.1); --vocs-color-background: oklch(0.226 0.034 226.8); } /* Square corners - the dashboard's rounded-none aesthetic. Tailwind v4 utilities read the --radius-* scale; zeroing it flattens every component. (Keep full rounding for elements that are genuinely circles.) */ :root { --radius-xs: 0 !important; --radius-sm: 0 !important; --radius-md: 0 !important; --radius-lg: 0 !important; --radius-xl: 0 !important; --radius-2xl: 0 !important; --radius-3xl: 0 !important; --radius-4xl: 0 !important; } /* Tailwind inlines radius values into utilities, so the vars alone don't bite - flatten computed radii directly, sparing true circles. */ [data-vocs] *:not([class*="rounded-full"]):not(img):not(svg):not(svg *) { border-radius: 0 !important; } /* No mode toggle in a single-mode site. */ [data-vocs] button[aria-label*="theme" i], [data-vocs] button[aria-label*="Toggle color" i], [data-vocs] [class*="ColorScheme" i] { display: none !important; } /* Wordmark image sizing in the nav. */ [data-vocs] img[src="/freeside-wordmark.png"] { height: 12px; width: auto; }