export interface ColorTokens {
  primary: string;
  secondary: string;
  background: string;
  surface: string;
  text: {
    primary: string;
    secondary: string;
    onPrimary: string;
  };
  gradients: {
    sunset: [string, string, string, string];
    card: [string, string, string];
    button: [string, string];
    glass: [string, string];
  };
}

export interface QwikTheme {
  colors: ColorTokens;
  spacing: {
    xs: number;
    s: number;
    m: number;
    l: number;
    xl: number;
  };
  borderRadius: {
    s: number;
    m: number;
    l: number;
    xl: number;
  };
}

export const qwikTheme: QwikTheme = {
  colors: {
    primary: '#FF4500', // OrangeRed
    secondary: '#FFD4C8', // Pale Coral
    background: '#0F1419', // Deep dark
    surface: 'rgba(255, 255, 255, 0.08)',
    text: {
      primary: '#FFFFFF',
      secondary: '#94A3B8',
      onPrimary: '#FFFFFF',
    },
    gradients: {
      // Smoother sunset: Pink -> Orange -> Gold -> Purple
      sunset: ['#FF69B4', '#FF8C00', '#FFD700', '#DA70D6'],
      card: ['rgba(255, 255, 255, 0.1)', 'rgba(255, 255, 255, 0.05)', 'rgba(255, 255, 255, 0)'],
      button: ['#FF4500', '#FF69B4'],
      glass: ['rgba(255, 255, 255, 0.15)', 'rgba(255, 255, 255, 0.05)'],
    },
  },
  spacing: {
    xs: 4,
    s: 8,
    m: 16,
    l: 24,
    xl: 32,
  },
  borderRadius: {
    s: 8,
    m: 12,
    l: 16,
    xl: 24,
  },
};