/**
 * Token access layer for Recipe Manager.
 *
 * Canonical source of truth: src/styles/tokens.css
 * This file intentionally exposes CSS variable references only,
 * so TypeScript consumers do not duplicate hardcoded token values.
 */

export const tokenVar = (name: `--${string}`) => `var(${name})`;

export const colors = {
  brand50: tokenVar('--color-brand-50'),
  brand100: tokenVar('--color-brand-100'),
  brand200: tokenVar('--color-brand-200'),
  brand300: tokenVar('--color-brand-300'),
  brand400: tokenVar('--color-brand-400'),
  brand500: tokenVar('--color-brand-500'),
  brand600: tokenVar('--color-brand-600'),
  brand700: tokenVar('--color-brand-700'),
  brand800: tokenVar('--color-brand-800'),

  primary: tokenVar('--color-primary'),
  primaryDark: tokenVar('--color-primary-dark'),
  primaryLight: tokenVar('--color-primary-light'),
  accent: tokenVar('--color-accent'),

  success: tokenVar('--color-success'),
  successLight: tokenVar('--color-success-light'),
  warning: tokenVar('--color-warning'),
  warningLight: tokenVar('--color-warning-light'),
  error: tokenVar('--color-error'),
  errorLight: tokenVar('--color-error-light'),

  bg: tokenVar('--bg'),
  bgAlt: tokenVar('--bg-alt'),
  surface: tokenVar('--surface'),
  surfaceMuted: tokenVar('--surface-muted'),
  border: tokenVar('--border'),

  text: tokenVar('--text'),
  textDim: tokenVar('--text-dim'),
  textHeading: tokenVar('--text-h'),

  focusRing: tokenVar('--focus-ring'),
} as const;

export const typography = {
  fontFamily: {
    sans: tokenVar('--sans'),
    heading: tokenVar('--heading'),
    mono: tokenVar('--mono'),
  },
  fontSize: {
    xs: tokenVar('--font-size-xs'),
    sm: tokenVar('--font-size-sm'),
    base: tokenVar('--font-size-base'),
    lg: tokenVar('--font-size-lg'),
    xl: tokenVar('--font-size-xl'),
    '2xl': tokenVar('--font-size-2xl'),
    '3xl': tokenVar('--font-size-3xl'),
    '4xl': tokenVar('--font-size-4xl'),
  },
  lineHeight: {
    tight: tokenVar('--line-height-tight'),
    normal: tokenVar('--line-height-normal'),
    relaxed: tokenVar('--line-height-relaxed'),
  },
  // retained for semantic utility in TS-only logic
  fontWeight: {
    regular: 400,
    medium: 500,
    semibold: 600,
    bold: 700,
    extrabold: 800,
  },
} as const;

export const spacing = {
  xxs: tokenVar('--space-xxs'),
  xs: tokenVar('--space-xs'),
  sm: tokenVar('--space-sm'),
  md: tokenVar('--space-md'),
  lg: tokenVar('--space-lg'),
  xl: tokenVar('--space-xl'),
  '2xl': tokenVar('--space-2xl'),
  '3xl': tokenVar('--space-3xl'),
} as const;

export const radius = {
  xs: tokenVar('--radius-xs'),
  sm: tokenVar('--radius-sm'),
  md: tokenVar('--radius-md'),
  lg: tokenVar('--radius-lg'),
  xl: tokenVar('--radius-xl'),
  '2xl': tokenVar('--radius-2xl'),
  full: tokenVar('--radius-full'),
} as const;

export const shadows = {
  subtle: tokenVar('--shadow-subtle'),
  card: tokenVar('--card-shadow'),
  hover: tokenVar('--shadow-hover'),
  focus: tokenVar('--focus-ring'),
} as const;

/**
 * Transitional helper map for existing call sites.
 * Values must remain references to CSS vars only.
 */
export const componentStyles = {
  button: {
    height: '2.75rem',
    paddingX: spacing.md,
    radius: radius.md,
  },
  card: {
    radius: radius.lg,
    border: `1px solid ${colors.border}`,
    shadow: shadows.card,
  },
  input: {
    radius: radius.md,
    border: `1px solid ${colors.border}`,
    minHeight: '2.75rem',
  },
  chip: {
    radius: radius.full,
    paddingX: '0.625rem',
    paddingY: spacing.xxs,
  },
  section: {
    radius: radius.xl,
    border: `1px solid ${colors.border}`,
    shadow: shadows.card,
  },
  page: {
    maxWidth: '72rem',
    gutter: spacing.md,
  },
} as const;

export const recipeAccentPalette = [
  tokenVar('--color-brand-500'),
  tokenVar('--color-error'),
  '#84cc16',
  '#f59e0b',
  tokenVar('--color-primary'),
  '#14b8a6',
] as const;

export const designTokens = {
  colors,
  typography,
  spacing,
  radius,
  shadows,
  componentStyles,
  recipeAccentPalette,
} as const;
