/**

 * 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.

 */

// Primary Colors

const NEON_GREEN = "#13ec5b";

const PRIMARY_DARK = "#0f172a";

// Surface & Background

const BACKGROUND_LIGHT = "#f6f8f6";

const BACKGROUND_DARK_GHOST = "#F8FAFC";

// Text Colors

const TEXT_PRIMARY = "#0f172a";

const TEXT_SECONDARY = "#64748b";

const TEXT_PLACEHOLDER = "#94A3B8";

// Borders & Accents

const BORDER_SUBTLE = "#f1f5f9";

const BORDER_SUBTLE_GRAY = "#E5E7EB";

const BORDER_SUBTLE_LIGHT_GRAY = "#CBD5E1";

const STATUS_ACTIVE_BG = "rgba(19, 236, 91, 0.1)";

// Semantic Color Pills and stuff

const PILL_BLUE = "#dbeafe";

const PILL_INDIGO = "#e0e7ff";

const PILL_PURPLE = "#f3e8ff";

const tintColorLight = "#12ED5C";

const tintColorSecondary = "#618A70";

const GRAY = "#475569";

const LIGHT_GRAY = "#64748B";

const LIGHT_SLATE_GRAY = "#94A3B8";

const PURE_WHITE = "#FFFFFF";

export const Colors = {

  light: {

    // Primary Actions & Focus

    text: TEXT_PRIMARY,

    textSecondary: TEXT_SECONDARY,

    background: BACKGROUND_LIGHT,

    surface: PURE_WHITE,

    tint: NEON_GREEN,

    backgroundDarkGhost: BACKGROUND_DARK_GHOST,

    borderDashed: BORDER_SUBTLE_LIGHT_GRAY,

    smallAddButtonIcon: BORDER_SUBTLE_LIGHT_GRAY,

    // Secondary

    neutral: '#6F7A6D',

    //secondaryBackground: '#E0EBDB',

    secondaryBackground: '#0EB545',

    // Interactive States

    icon: TEXT_SECONDARY,

    tabIconDefault: TEXT_SECONDARY,

    tabIconSelected: NEON_GREEN,

    // Form Inputs

    inputBackgroundColor: PURE_WHITE,

    inputBackgroundDarkGhostColor: BACKGROUND_DARK_GHOST,

    inputBorderColor: BORDER_SUBTLE_GRAY,

    inputFocusBorderColor: NEON_GREEN,

    inputPlaceholderColor: TEXT_PLACEHOLDER,

    // Cards & Containers

    cardBackground: PURE_WHITE,

    cardBorder: BORDER_SUBTLE,

    cardShadow: "rgba(0, 0, 0, 0.05)",

    // Active / Inactive States

    activeBackground: STATUS_ACTIVE_BG,

    inactiveOpacity: 0.7,

    moodIntensityLabel: "#94a3b8",

    // Semantic Accents (for categorization)

    accentBlue: PILL_BLUE,

    accentIndigo: PILL_INDIGO,

    accentPurple: PILL_PURPLE,

    accentDarkPurple: "#7F77DD",

    // Some grays

    white: PURE_WHITE,

    gray: GRAY,

    lightGray: LIGHT_GRAY,

    lightSlateGray: LIGHT_SLATE_GRAY,

    black: PRIMARY_DARK,

    // Disabled / Secondary

    disabled: "#cbd5e1",

    divider: BORDER_SUBTLE,

    sliderTracking: "#E2E8F0",

    sliderLabels: "#94a3b8",

    warning: "orange",

    success: "#22c55e",

    danger: "#EF4444",

    textBlack: PRIMARY_DARK,

  },

};

export const Typography = {

  // Headlines

  headlineXg: {

    fontFamily: "Inter",

    fontSize: 36,

    fontWeight: "900" as const,

    lineHeight: 40,

  },

  headlineLg: {

    fontFamily: "Inter",

    fontSize: 20,

    fontWeight: "900" as const,

    lineHeight: 28,

    letterSpacing: -0.02,

  },

  headlineMd: {

    fontFamily: "Inter",

    fontSize: 18,

    fontWeight: "700" as const,

    lineHeight: 24,

  },

  // Body

  bodyLg: {

    fontFamily: "Inter",

    fontSize: 16,

    fontWeight: "700" as const,

    lineHeight: 20,

  },

  bodyMd: {

    fontFamily: "Inter",

    fontSize: 14,

    fontWeight: "500" as const,

    lineHeight: 20,

  },

  // Labels

  labelSm: {

    fontFamily: "Inter",

    fontSize: 12,

    fontWeight: "600" as const,

    lineHeight: 16,

    letterSpacing: 0.05,

  },

  // Used for the Slider labels

  labelXs: {

    fontFamily: "Inter",

    fontSize: 10,

    lineHeight: 15,

    letterSpacing: 0.25,

  },

  cardHint: {

    fontFamily: "Inter",

    fontSize: 11,

    lineHeight: 13.8,

    fontStyle: "italic",

  },

};

export const Spacing = {

  containerPadding: 16, // 1rem

  sectionGap: 32, // 2rem

  inlineGapSm: 8, // 0.5rem

  cardGap: 12, // 0.75rem

};

export const BorderRadius = {

  sm: 4, // 0.25rem

  default: 8, // 0.5rem

  md: 12, // 0.75rem

  lg: 16, // 1rem

  xl: 24, // 1.5rem

  full: 9999, // pill-shaped

};

export const Shadows = {

  sm: {

    shadowColor: "#000000",

    shadowOffset: { width: 0, height: 1 },

    shadowOpacity: 0.05,

    shadowRadius: 2,

    elevation: 2,

  },

  md: {

    shadowColor: "#000000",

    shadowOffset: { width: 0, height: 4 },

    shadowOpacity: 0.1,

    shadowRadius: 8,

    elevation: 4,

  },

  lg: {

    shadowColor: NEON_GREEN,

    shadowOffset: { width: 0, height: 8 },

    shadowOpacity: 0.15,

    shadowRadius: 16,

    elevation: 8,

  },

};

export const Fonts = {

  sans: "Inter",

  serif: "serif",

  rounded: "Inter",

  mono: "monospace",

};

export const Theme = {

  colors: Colors,

  typography: Typography,

  spacing: Spacing,

  shadows: Shadows,

  borderRadius: BorderRadius,

};