/**
 * 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,
    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" as const,
  },
};

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,
};