/**
 * OPTIONS DE COULEURS MODERNES - PAS DE DÉGRADÉS
 * =================================================
 *
 * Alternatives au bleu traditionnel pour un design contemporain
 */

// =============================================================================
// OPTION 1: GRIS-BLEU (SLATE) - RECOMMANDÉE ✅
// =============================================================================
/**
 * Gris-bleu moderne et professionnel
 * Inspiré par Linear, Vercel, GitHub
 * Très élégant, discret et apaisant pour les yeux
 */
export const SLATE_THEME = {
  name: 'Gris-Bleu (Slate)',
  description: 'Moderne, professionnel et apaisant - comme Linear/Vercel',
  
  light: {
    // Backgrounds
    background: 'oklch(0.985 0.003 230)',      // Blanc grisâtre très léger
    card: 'oklch(1 0 0)',                        // Blanc pur
    sidebar: 'oklch(0.97 0.004 230)',           // Gris-bleu très pâle
    input: 'oklch(0.98 0.003 230)',             // Gris-bleu pâle

    // Textes
    foreground: 'oklch(0.2 0.02 230)',          // Gris-bleu foncé
    'foreground-secondary': 'oklch(0.45 0.015 230)', // Gris-bleu moyen
    'foreground-muted': 'oklch(0.6 0.01 230)',       // Gris-bleu clair

    // Primary (le point coloré de l'interface)
    primary: 'oklch(0.45 0.08 230)',         // Gris-bleu doux
    'primary-hover': 'oklch(0.4 0.09 230)',      // Gris-bleu plus foncé
    'primary-foreground': 'oklch(0.99 0 0)',     // Blanc

    // Accents
    accent: 'oklch(0.94 0.005 230)',          // Gris-bleu très pâle
    'accent-foreground': 'oklch(0.2 0.02 230)',

    // Borders
    border: 'oklch(0.9 0.008 230)',           // Gris-bleu très clair
    'border-hover': 'oklch(0.82 0.01 230)',

    // Functional
    success: 'oklch(0.65 0.15 145)',        // Vert emerald
    warning: 'oklch(0.75 0.12 70)',         // Jaune/orange
    destructive: 'oklch(0.6 0.18 25)',       // Rouge
  },

  dark: {
    // Backgrounds
    background: 'oklch(0.14 0.005 230)',     // Noir grisâtre léger
    card: 'oklch(0.18 0.006 230)',         // Gris-bleu foncé
    sidebar: 'oklch(0.12 0.005 230)',        // Noir grisâtre
    input: 'oklch(0.2 0.006 230)',

    // Textes
    foreground: 'oklch(0.97 0.003 230)',    // Blanc grisâtre
    'foreground-secondary': 'oklch(0.75 0.008 230)',
    'foreground-muted': 'oklch(0.55 0.01 230)',

    // Primary
    primary: 'oklch(0.55 0.08 230)',         // Gris-bleu plus clair
    'primary-hover': 'oklch(0.6 0.09 230)',
    'primary-foreground': 'oklch(0.1 0 0)',

    // Accents
    accent: 'oklch(0.24 0.006 230)',
    'accent-foreground': 'oklch(0.97 0.003 230)',

    // Borders
    border: 'oklch(0.28 0.01 230)',
    'border-hover': 'oklch(0.38 0.012 230)',

    // Functional
    success: 'oklch(0.7 0.15 145)',
    warning: 'oklch(0.8 0.12 70)',
    destructive: 'oklch(0.65 0.18 25)',
  },
} as const;

// =============================================================================
// OPTION 2: MONOCHROME GRIS (MINIMALISTE)
// =============================================================================
/**
 * Noir et blanc avec subtilités de gris
 * Style minimaliste ultra-moderne (Linear, Stripe, Apple)
 * Absolument pas de couleur sauf pour les fonctionnalités
 */
export const MONOCHROME_THEME = {
  name: 'Monochrome Gris',
  description: 'Minimaliste et élégant - style Linear/Apple',

  light: {
    background: 'oklch(0.99 0 0)',           // Blanc pur
    card: 'oklch(1 0 0)',                    // Blanc pur
    sidebar: 'oklch(0.96 0 0)',             // Gris très pâle
    input: 'oklch(0.98 0 0)',

    foreground: 'oklch(0.15 0 0)',           // Noir pur
    'foreground-secondary': 'oklch(0.45 0 0)',   // Gris moyen
    'foreground-muted': 'oklch(0.6 0 0)',     // Gris clair

    primary: 'oklch(0.2 0 0)',              // Gris foncé
    'primary-hover': 'oklch(0.15 0 0)',       // Noir
    'primary-foreground': 'oklch(1 0 0)',     // Blanc

    accent: 'oklch(0.95 0 0)',              // Gris très pâle
    'accent-foreground': 'oklch(0.2 0 0)',

    border: 'oklch(0.89 0 0)',             // Gris très clair
    'border-hover': 'oklch(0.75 0 0)',

    success: 'oklch(0.6 0.15 145)',         // Vert subtil
    warning: 'oklch(0.7 0.12 70)',          // Jaune subtil
    destructive: 'oklch(0.55 0.18 25)',     // Rouge subtil
  },

  dark: {
    background: 'oklch(0.1 0 0)',            // Noir pur
    card: 'oklch(0.14 0 0)',                // Gris très foncé
    sidebar: 'oklch(0.08 0 0)',             // Noir pur
    input: 'oklch(0.16 0 0)',

    foreground: 'oklch(0.98 0 0)',           // Blanc pur
    'foreground-secondary': 'oklch(0.7 0 0)',   // Gris moyen
    'foreground-muted': 'oklch(0.5 0 0)',     // Gris foncé

    primary: 'oklch(0.85 0 0)',             // Gris clair
    'primary-hover': 'oklch(0.9 0 0)',        // Blanc
    'primary-foreground': 'oklch(0.1 0 0)',   // Noir

    accent: 'oklch(0.2 0 0)',               // Gris foncé
    'accent-foreground': 'oklch(0.98 0 0)',

    border: 'oklch(0.25 0 0)',             // Gris foncé
    'border-hover': 'oklch(0.35 0 0)',

    success: 'oklch(0.65 0.15 145)',
    warning: 'oklch(0.75 0.12 70)',
    destructive: 'oklch(0.6 0.18 25)',
  },
} as const;

// =============================================================================
// OPTION 3: VIOLET PROFOND (INDIGO)
// =============================================================================
/**
 * Violet profond élégant et moderne
 * Entre le bleu et le violet
 * Très professionnel (Discord, Notion, Figma)
 */
export const INDIGO_THEME = {
  name: 'Violet Profond',
  description: 'Élégant et moderne - style Discord/Notion',

  light: {
    background: 'oklch(0.99 0.005 260)',      // Blanc légèrement violacé
    card: 'oklch(1 0 0)',
    sidebar: 'oklch(0.96 0.006 260)',
    input: 'oklch(0.97 0.005 260)',

    foreground: 'oklch(0.2 0.015 260)',          // Gris-violet foncé
    'foreground-secondary': 'oklch(0.45 0.012 260)',
    'foreground-muted': 'oklch(0.6 0.008 260)',

    primary: 'oklch(0.55 0.18 260)',          // Violet profond
    'primary-hover': 'oklch(0.5 0.2 260)',       // Violet plus foncé
    'primary-foreground': 'oklch(0.99 0 0)',

    accent: 'oklch(0.94 0.008 260)',
    'accent-foreground': 'oklch(0.2 0.015 260)',

    border: 'oklch(0.9 0.01 260)',
    'border-hover': 'oklch(0.82 0.012 260)',

    success: 'oklch(0.65 0.15 145)',
    warning: 'oklch(0.75 0.12 70)',
    destructive: 'oklch(0.6 0.18 25)',
  },

  dark: {
    background: 'oklch(0.14 0.008 260)',     // Noir légèrement violacé
    card: 'oklch(0.18 0.01 260)',         // Gris-violet foncé
    sidebar: 'oklch(0.12 0.008 260)',
    input: 'oklch(0.2 0.01 260)',

    foreground: 'oklch(0.97 0.005 260)',    // Blanc légèrement violacé
    'foreground-secondary': 'oklch(0.75 0.008 260)',
    'foreground-muted': 'oklch(0.55 0.01 260)',

    primary: 'oklch(0.65 0.18 260)',          // Violet plus clair
    'primary-hover': 'oklch(0.7 0.2 260)',
    'primary-foreground': 'oklch(0.1 0 0)',

    accent: 'oklch(0.24 0.01 260)',
    'accent-foreground': 'oklch(0.97 0.005 260)',

    border: 'oklch(0.28 0.012 260)',
    'border-hover': 'oklch(0.38 0.015 260)',

    success: 'oklch(0.7 0.15 145)',
    warning: 'oklch(0.8 0.12 70)',
    destructive: 'oklch(0.65 0.18 25)',
  },
} as const;

// =============================================================================
// OPTION 4: TEAL (TURQUOISE)
// =============================================================================
/**
 * Turquoise/teal moderne et rafraîchissante
 * Entre le bleu et le vert
 * Très appréciée dans le design moderne (Linear, Atlassian)
 */
export const TEAL_THEME = {
  name: 'Teal (Turquoise)',
  description: 'Moderne et rafraîchissant - style Atlassian/Linear',

  light: {
    background: 'oklch(0.99 0.003 195)',      // Blanc légèrement teinté
    card: 'oklch(1 0 0)',
    sidebar: 'oklch(0.96 0.004 195)',
    input: 'oklch(0.97 0.003 195)',

    foreground: 'oklch(0.2 0.015 195)',          // Gris-teal foncé
    'foreground-secondary': 'oklch(0.45 0.012 195)',
    'foreground-muted': 'oklch(0.6 0.008 195)',

    primary: 'oklch(0.55 0.14 195)',          // Teal moderne
    'primary-hover': 'oklch(0.5 0.16 195)',       // Teal plus foncé
    'primary-foreground': 'oklch(0.99 0 0)',

    accent: 'oklch(0.94 0.005 195)',
    'accent-foreground': 'oklch(0.2 0.015 195)',

    border: 'oklch(0.9 0.008 195)',
    'border-hover': 'oklch(0.82 0.01 195)',

    success: 'oklch(0.65 0.15 145)',
    warning: 'oklch(0.75 0.12 70)',
    destructive: 'oklch(0.6 0.18 25)',
  },

  dark: {
    background: 'oklch(0.14 0.005 195)',     // Noir légèrement teinté
    card: 'oklch(0.18 0.006 195)',         // Gris-teal foncé
    sidebar: 'oklch(0.12 0.005 195)',
    input: 'oklch(0.2 0.006 195)',

    foreground: 'oklch(0.97 0.003 195)',    // Blanc légèrement teinté
    'foreground-secondary': 'oklch(0.75 0.006 195)',
    'foreground-muted': 'oklch(0.55 0.008 195)',

    primary: 'oklch(0.65 0.14 195)',          // Teal plus clair
    'primary-hover': 'oklch(0.7 0.16 195)',
    'primary-foreground': 'oklch(0.1 0 0)',

    accent: 'oklch(0.24 0.006 195)',
    'accent-foreground': 'oklch(0.97 0.003 195)',

    border: 'oklch(0.28 0.01 195)',
    'border-hover': 'oklch(0.38 0.012 195)',

    success: 'oklch(0.7 0.15 145)',
    warning: 'oklch(0.8 0.12 70)',
    destructive: 'oklch(0.65 0.18 25)',
  },
} as const;

// =============================================================================
// RÉSUMÉ DES OPTIONS
// =============================================================================

/**
 * Comparaison des options :
 *
 * | Option | Modernité | Professionnalisme | Fatigue oculaire | Unicité |
 * |--------|-----------|-------------------|------------------|----------|
 * | Slate (Gris-Bleu) | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐ |
 * | Monochrome | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐ | ⭐⭐⭐⭐⭐ | ⭐⭐⭐ |
 * | Indigo | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐ | ⭐⭐⭐⭐ | ⭐⭐⭐⭐⭐ |
 * | Teal | ⭐⭐⭐⭐ | ⭐⭐⭐⭐ | ⭐⭐⭐⭐ | ⭐⭐⭐⭐⭐ |
 *
 * Recommandation : Slate (Gris-Bleu)
 * - Le plus professionnel
 * - Fatigue oculaire minimale
 * - Très moderne et tendance
 * - Différent du bleu traditionnel
 * - Cohérent avec votre suggestion
 */

export type ThemeOption = 'slate' | 'monochrome' | 'indigo' | 'teal';

/**
 * Pour choisir le thème :
 *
 * function getTheme(option: ThemeOption) {
 *   switch(option) {
 *     case 'slate': return SLATE_THEME;
 *     case 'monochrome': return MONOCHROME_THEME;
 *     case 'indigo': return INDIGO_THEME;
 *     case 'teal': return TEAL_THEME;
 *   }
 * }
 */