/**
 * Below are the colors that are used in the app. The colors are defined for light and dark mode.
 * This theme matches the OTP verification screen design.
 */

import '@/global.css';

import { Platform } from 'react-native';

export const Colors = {
  light: {
    text: '#1A1A1E',                 // تیره‌تر و خواناتر از مشکی خالص
    background: '#F8F9FC',           // پس‌زمینهٔ بسیار روشن با مایل به آبی
    backgroundElement: '#FFFFFF',     // کارت‌ها و فیلدهای ورودی سفید
    backgroundSelected: '#E8ECF4',   // آیتم انتخاب‌شده با رنگ ملایم
    textSecondary: '#6E6E7A',        // خاکستری با کنتراست خوب
    accent: '#6C63FF',               // همان رنگ بنفش برند
    border: '#DCDEE3',               // حاشیهٔ کمرنگ و شیک
    inputBackground: '#FFFFFF',      // ورودی‌ها سفید
    inputPlaceholder: '#9A9AA6',     // پلیسهولدر کمی تیره‌تر برای خوانایی
  },
  dark: {
    text: '#FFFFFF',
    background: '#0D0D14',        // Main background
    backgroundElement: '#161622',  // Input, button backgrounds
    backgroundSelected: '#2E3135',
    textSecondary: '#888888',      // Subtitle, labels
    accent: '#6C63FF',             // Primary button, focus border
    border: '#2A2A3E',             // Borders, dividers
    inputBackground: '#161622',    // Same as backgroundElement
    inputPlaceholder: '#5A5A6E',
  },
} as const;

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

export const Fonts = Platform.select({
  ios: {
    sans: 'system-ui',
    serif: 'ui-serif',
    rounded: 'ui-rounded',
    mono: 'ui-monospace',
  },
  android: {
    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)',
  },
  default: {
    sans: 'normal',
    serif: 'serif',
    rounded: 'normal',
    mono: 'monospace',
  },
});

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

export const Typography = {
  title: {
    fontSize: 20,
    fontWeight: '500',
    lineHeight: 28,
  },
  subtitle: {
    fontSize: 12,
    fontWeight: '400',
    lineHeight: 16,
  },
  fieldLabel: {
    fontSize: 11,
    fontWeight: '500',
    letterSpacing: 0.3,
  },
  body: {
    fontSize: 13,
    fontWeight: '400',
  },
  caption: {
    fontSize: 11,
    fontWeight: '400',
  },
} as const;

export const BorderRadius = {
  small: 8,
  medium: 12,
  large: 16,
  xlarge: 24,
} as const;

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