import type { CSSProperties } from 'react';

/**
 * Bridges data-driven values (positions, widths) into SCSS modules as CSS
 * custom properties, keeping all declarative styling in the stylesheets.
 */
export function cssVars(vars: Record<`--${string}`, string | number>): CSSProperties {
  return vars as CSSProperties;
}

export function px(value: number): string {
  return `${value}px`;
}