export const COLORS = {
  // Background
  background: "#0a0a0a",
  surface: "#1a1a1a",
  surfaceLight: "#242424",

  // Text
  text: "#ffffff",
  textSecondary: "#b0b0b0",
  textTertiary: "#808080",

  // Borders
  border: "#333333",
  borderLight: "#404040",

  // Actions
  primary: "#000000",
  primaryText: "#ffffff",
  secondary: "#333333",

  // Status
  success: "#10b981",
  error: "#ef4444",
  warning: "#f59e0b",
  info: "#3b82f6",

  // Inputs
  inputBackground: "#1a1a1a",
  inputBorder: "#404040",
  inputText: "#ffffff",
  inputPlaceholder: "#808080",

  // Buttons
  buttonBackground: "#000000",
  buttonText: "#ffffff",
  buttonDisabledBackground: "#404040",
  buttonDisabledText: "#808080",

  // Headers
  headerBackground: "#0a0a0a",
  headerBorder: "#333333",
  headerText: "#ffffff",
};

export const TYPOGRAPHY = {
  title: {
    fontSize: 28,
    fontWeight: "800" as const,
  },
  headline: {
    fontSize: 20,
    fontWeight: "700" as const,
  },
  body: {
    fontSize: 16,
    fontWeight: "500" as const,
  },
  label: {
    fontSize: 14,
    fontWeight: "600" as const,
  },
  caption: {
    fontSize: 12,
    fontWeight: "500" as const,
  },
};

export const SPACING = {
  xs: 4,
  sm: 8,
  md: 12,
  lg: 16,
  xl: 24,
  xxl: 32,
};

export const BORDER_RADIUS = {
  sm: 4,
  md: 8,
  lg: 12,
  xl: 16,
  round: 50,
};