managarten/picture/apps/mobile/constants/themes/sunset.ts

import { ThemeDefinition } from './types';

/**
 * Sunset Theme (Orange/Pink)
 * Warm, creative design with orange-pink palette
 */
export const sunsetTheme: ThemeDefinition = {
  name: 'sunset',
  displayName: 'Sunset',

  // Dark Mode
  dark: {
    mode: 'dark',
    colors: {
      // Backgrounds
      background: '#0a0a0a',
      surface: '#1f1410',      // Warm dark brown
      elevated: '#2a1f1a',
      overlay: 'rgba(10, 10, 10, 0.8)',

      // Borders
      border: '#3d2f28',
      divider: '#2a1f1a',

      // Input
      input: {
        background: '#1a1410',
        border: '#3d2f28',
        text: '#fef3c7',       // amber-100
        placeholder: '#92400e', // amber-800
      },

      // Text
      text: {
        primary: '#fef3c7',    // amber-100
        secondary: '#fcd34d',  // amber-300
        tertiary: '#f59e0b',   // amber-500
        disabled: '#92400e',   // amber-800
        inverse: '#0a0a0a',
      },

      // Primary (Orange)
      primary: {
        default: '#fb923c',    // orange-400
        hover: '#fdba74',      // orange-300
        active: '#f97316',     // orange-500
        light: '#fed7aa',      // orange-200
        dark: '#ea580c',       // orange-600
        contrast: '#ffffff',
      },

      // Secondary (Pink)
      secondary: {
        default: '#f472b6',    // pink-400
        light: '#f9a8d4',      // pink-300
        dark: '#ec4899',       // pink-500
        contrast: '#ffffff',
      },

      // Status
      success: '#10b981',      // emerald-500
      warning: '#fbbf24',      // amber-400
      error: '#f43f5e',        // rose-500
      info: '#60a5fa',         // blue-400

      // Semantic
      favorite: '#f43f5e',     // rose-500
      like: '#f43f5e',         // rose-500
      tag: '#fb923c',          // orange-400

      // Special
      skeleton: '#2a1f1a',
      shimmer: '#3d2f28',
    },

    shadows: {
      sm: {
        shadowColor: '#fb923c',
        shadowOffset: { width: 0, height: 1 },
        shadowOpacity: 0.1,
        shadowRadius: 2,
        elevation: 2,
      },
      md: {
        shadowColor: '#fb923c',
        shadowOffset: { width: 0, height: 4 },
        shadowOpacity: 0.15,
        shadowRadius: 6,
        elevation: 4,
      },
      lg: {
        shadowColor: '#fb923c',
        shadowOffset: { width: 0, height: 10 },
        shadowOpacity: 0.2,
        shadowRadius: 15,
        elevation: 8,
      },
    },

    opacity: {
      disabled: 0.5,
      overlay: 0.8,
      hover: 0.9,
      pressed: 0.7,
    },
  },

  // Light Mode
  light: {
    mode: 'light',
    colors: {
      // Backgrounds
      background: '#fff7ed',   // orange-50
      surface: '#ffffff',
      elevated: '#fffbeb',     // amber-50
      overlay: 'rgba(0, 0, 0, 0.5)',

      // Borders
      border: '#fed7aa',       // orange-200
      divider: '#ffedd5',      // orange-100

      // Input
      input: {
        background: '#ffffff',
        border: '#fdba74',     // orange-300
        text: '#7c2d12',       // orange-900
        placeholder: '#ea580c', // orange-600
      },

      // Text
      text: {
        primary: '#7c2d12',    // orange-900
        secondary: '#9a3412',  // orange-800
        tertiary: '#c2410c',   // orange-700
        disabled: '#fdba74',   // orange-300
        inverse: '#ffffff',
      },

      // Primary (Orange)
      primary: {
        default: '#f97316',    // orange-500
        hover: '#ea580c',      // orange-600
        active: '#c2410c',     // orange-700
        light: '#fb923c',      // orange-400
        dark: '#9a3412',       // orange-800
        contrast: '#ffffff',
      },

      // Secondary (Pink)
      secondary: {
        default: '#ec4899',    // pink-500
        light: '#f472b6',      // pink-400
        dark: '#db2777',       // pink-600
        contrast: '#ffffff',
      },

      // Status
      success: '#10b981',      // emerald-500
      warning: '#f59e0b',      // amber-500
      error: '#f43f5e',        // rose-500
      info: '#3b82f6',         // blue-500

      // Semantic
      favorite: '#f43f5e',     // rose-500
      like: '#f43f5e',         // rose-500
      tag: '#f97316',          // orange-500

      // Special
      skeleton: '#fed7aa',     // orange-200
      shimmer: '#ffedd5',      // orange-100
    },

    shadows: {
      sm: {
        shadowColor: '#f97316',
        shadowOffset: { width: 0, height: 1 },
        shadowOpacity: 0.1,
        shadowRadius: 2,
        elevation: 2,
      },
      md: {
        shadowColor: '#f97316',
        shadowOffset: { width: 0, height: 4 },
        shadowOpacity: 0.15,
        shadowRadius: 6,
        elevation: 4,
      },
      lg: {
        shadowColor: '#f97316',
        shadowOffset: { width: 0, height: 10 },
        shadowOpacity: 0.2,
        shadowRadius: 15,
        elevation: 8,
      },
    },

    opacity: {
      disabled: 0.5,
      overlay: 0.5,
      hover: 0.9,
      pressed: 0.7,
    },
  },
};