import { unsafeCSS } from '@design.estate/dees-element';

/**
 * Geist Sans font family - Main font for the design system
 * Already available in the environment, no need to load
 */
export const geistSansFont = 'Geist Sans';

/**
 * Intel One Mono font family - Monospace font for code and technical content
 * Already available in the environment, no need to load
 */
export const intelOneMonoFont = 'Intel One Mono';

/**
 * Complete font family stacks with fallbacks
 */
export const geistFontFamily = `'${geistSansFont}', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif`;

export const monoFontFamily = `'${intelOneMonoFont}', 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', 'Fira Mono', 'Droid Sans Mono', 'Courier New', monospace`;

/**
 * CSS-ready font family values using unsafeCSS
 * Use these in component styles
 */
export const cssGeistFontFamily = unsafeCSS(geistFontFamily);
export const cssMonoFontFamily = unsafeCSS(monoFontFamily);

/**
 * Cal Sans font for headings - Display font
 * May need to be loaded separately
 */
export const calSansFont = 'Cal Sans';
export const calSansFontFamily = `'${calSansFont}', ${geistFontFamily}`;
export const cssCalSansFontFamily = unsafeCSS(calSansFontFamily);

/**
 * Roboto Slab font for special content - Serif font
 * May need to be loaded separately
 */
export const robotoSlabFont = 'Roboto Slab';
export const robotoSlabFontFamily = `'${robotoSlabFont}', Georgia, serif`;
export const cssRobotoSlabFontFamily = unsafeCSS(robotoSlabFontFamily);

/**
 * Base font styles that can be applied to components
 */
export const baseFontStyles = unsafeCSS(`
  font-family: ${geistFontFamily};
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'cv11', 'tnum', 'cv05' 1;
`);