import { createThemeCssVariables, type FunnelTheme } from '@funnelsgrove/runtime';

export const theme = {
  interfaceMode: 'light',
  colors: {
    interface: {
      background: '#f4f7f4',
      primary: '#4db53f',
      primaryText: '#ffffff',
      secondary: '#f4cf3a',
      secondaryText: '#1f2933',
      text: '#1f2933',
    },
    interfaceOpacity: {
      background: 100,
      primary: 100,
      primaryText: 100,
      secondary: 100,
      secondaryText: 100,
      text: 100,
    },
    semantic: {
      accent: '#f4cf3a',
      button: '#4db53f',
      buttonText: '#ffffff',
      surface: '#ffffff',
      border: '#d7e3df',
      warning: '#d58b24',
      danger: '#c74b43',
    },
    derived: {
      bgMuted: '#edf4f2',
      bgSuccess: '#eef8f1',
      bgWarning: '#fff6e8',
      bgDanger: '#fff2ee',
      bgNeutral: '#f6f1e8',
      textMuted: '#5f6b74',
      accentSoft: 'rgb(244 207 58 / 16%)',
      accentMuted: '#dccd82',
    },
  },
  darkOverrides: {},
  typography: {
    font: {
      family: 'Inter',
      style: 'Normal',
      fallbacks: '-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
    },
    fontSizes: {
      xs: '12px',
      sm: '14px',
      md: '16px',
      lg: '20px',
      xl: '28px',
      xxl: '36px',
    },
    fontWeights: {
      regular: 400,
      medium: 500,
      semibold: 600,
      bold: 700,
      heavy: 800,
    },
    lineHeights: {
      tight: 1.2,
      normal: 1.45,
      relaxed: 1.65,
    },
  },
  deviceSize: {
    activePreset: 'Universal',
    presets: [{ name: 'Universal', shellWidth: 430, maxWidth: 430 }],
    padding: 16,
    cornerRadius: 16,
  },
  layout: {
    safeAreaOffsets: { top: 0, right: 0, bottom: 0, left: 0 },
  },
} as const satisfies FunnelTheme;

export const themeCssVariables = createThemeCssVariables(theme);