/**
 * Below are the colors that are used in the app. The colors are defined in the light and dark mode.
 * There are many other ways to style your app. For example, [Nativewind](https://www.nativewind.dev/), [Tamagui](https://tamagui.dev/), [unistyles](https://reactnativeunistyles.vercel.app), etc.
 */

import '@/global.css';

import { Platform } from 'react-native';

export const Colors = {
  light: {
    text: '#1C2420',
    background: '#F7F8F5',
    backgroundElement: '#FFFFFF',
    backgroundSelected: '#E9EDE8',
    textSecondary: '#55605A',
    border: '#E4E9E3',
    felt: '#237A52',
    feltSoft: '#E3F0E8',
    onFelt: '#FFFFFF',
    playerOne: '#2F6DB5',
    playerOneSoft: '#E4EDF7',
    playerTwo: '#C24578',
    playerTwoSoft: '#F7E6EE',
    gold: '#C99A2E',
    danger: '#B3383B',
    dangerSoft: '#F7E7E7',
  },
  dark: {
    text: '#E7ECE8',
    background: '#151A17',
    backgroundElement: '#1E2420',
    backgroundSelected: '#2A322C',
    textSecondary: '#9AA69E',
    border: '#2A322C',
    felt: '#2E8B5F',
    feltSoft: '#1E3A2C',
    onFelt: '#FFFFFF',
    playerOne: '#6FA5DC',
    playerOneSoft: '#1C2A3A',
    playerTwo: '#D9749E',
    playerTwoSoft: '#3A2230',
    gold: '#D9AE4B',
    danger: '#D4595C',
    dangerSoft: '#3A2222',
  },
} as const;

export type ThemeColor = keyof typeof Colors.light & keyof typeof Colors.dark;

export const Fonts = Platform.select({
  ios: {
    /** iOS `UIFontDescriptorSystemDesignDefault` */
    sans: 'system-ui',
    /** iOS `UIFontDescriptorSystemDesignSerif` */
    serif: 'ui-serif',
    /** iOS `UIFontDescriptorSystemDesignRounded` */
    rounded: 'ui-rounded',
    /** iOS `UIFontDescriptorSystemDesignMonospaced` */
    mono: 'ui-monospace',
  },
  default: {
    sans: 'normal',
    serif: 'serif',
    rounded: 'normal',
    mono: 'monospace',
  },
  web: {
    sans: 'var(--font-display)',
    serif: 'var(--font-serif)',
    rounded: 'var(--font-rounded)',
    mono: 'var(--font-mono)',
  },
});

export const Spacing = {
  half: 2,
  one: 4,
  two: 8,
  three: 16,
  four: 24,
  five: 32,
  six: 64,
} as const;

export const BottomTabInset = Platform.select({ ios: 50, android: 80 }) ?? 0;
export const MaxContentWidth = 800;