// Design-Tokens: einzige Quelle für Farbe, Abstand, Typografie im gesamten Frontend-Verbund.
// Modul-Frontends importieren diese Tokens, überschreiben sie nicht lokal (SHL-01 Akzeptanzkriterium 3).
// Kontrastwerte sind gegen WCAG 2.1 AA geprüft (Akzeptanzkriterium 1/4): mindestens 4.5:1 für Fließtext.

export type ColorScheme = "light" | "dark";

export interface ColorTokens {
  background: string;
  surface: string;
  surfaceRaised: string;
  border: string;
  textPrimary: string;
  textSecondary: string;
  accent: string;
  accentContrast: string;
  danger: string;
  dangerContrast: string;
  success: string;
  warning: string;
  focusRing: string;
}

// Kontrastwerte geprüft: textPrimary auf background/surface >= 7:1, textSecondary >= 4.5:1,
// accentContrast auf accent >= 4.5:1 (WCAG AA, siehe SHL-01 Prüfung 3).
export const colorTokens: Record<ColorScheme, ColorTokens> = {
  light: {
    background: "#FFFFFF",
    surface: "#F5F6F8",
    surfaceRaised: "#FFFFFF",
    border: "#D7DBE0",
    textPrimary: "#14181F",
    textSecondary: "#4B5563",
    accent: "#1D4ED8",
    accentContrast: "#FFFFFF",
    danger: "#B91C1C",
    dangerContrast: "#FFFFFF",
    success: "#15803D",
    warning: "#B45309",
    focusRing: "#1D4ED8",
  },
  dark: {
    background: "#0F1115",
    surface: "#181B21",
    surfaceRaised: "#20242C",
    border: "#333944",
    textPrimary: "#F2F4F7",
    textSecondary: "#B4BAC4",
    accent: "#5B8DEF",
    accentContrast: "#0F1115",
    danger: "#F87171",
    dangerContrast: "#0F1115",
    success: "#4ADE80",
    warning: "#FBBF24",
    focusRing: "#5B8DEF",
  },
};

export const spacing = {
  xs: "4px",
  sm: "8px",
  md: "16px",
  lg: "24px",
  xl: "32px",
  xxl: "48px",
} as const;

export const breakpoints = {
  mobile: "0px",
  tablet: "768px",
  desktop: "1200px",
} as const;

export const typography = {
  fontFamily: "'Inter', 'Segoe UI', system-ui, sans-serif",
  fontFamilyMono: "'JetBrains Mono', ui-monospace, monospace",
  sizeSm: "13px",
  sizeMd: "15px",
  sizeLg: "18px",
  sizeXl: "24px",
  lineHeight: 1.5,
  weightRegular: 400,
  weightMedium: 500,
  weightBold: 600,
} as const;

export function cssVariables(scheme: ColorScheme): Record<string, string> {
  const c = colorTokens[scheme];
  const vars: Record<string, string> = {};
  for (const [key, value] of Object.entries(c)) {
    vars[`--shl-color-${key.replace(/([A-Z])/g, "-$1").toLowerCase()}`] = value;
  }
  for (const [key, value] of Object.entries(spacing)) {
    vars[`--shl-spacing-${key}`] = value;
  }
  return vars;
}