/**
 * YODICORE - Charte Graphique PeopleOS Minimaliste
 * Variables CSS pour Tailwind CSS
 * Version 2.0 - Navy Blue + Amber Gold + Inter
 */

/* === GOOGLE FONTS : Inter === */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* === COULEURS PRINCIPALES === */

  /* Primary (Amber Gold) */
  --primary: #c17817;
  --primary-foreground: #FAFAFA;
  --primary-hover: rgba(193, 120, 23, 0.9);

  /* === SIDEBAR (Navigation latérale — Navy Blue) === */
  --sidebar: #1e3a5f;
  --sidebar-foreground: #E8E9EC;
  --sidebar-accent: #253f6a;
  --sidebar-accent-foreground: #F2F3F5;
  --sidebar-border: #2d4f7a;
  --sidebar-primary: #c17817;

  /* === CONTENU PRINCIPAL === */
  --background: #f8fafc;
  --foreground: #0f172a;
  --card: #ffffff;
  --card-foreground: #0f172a;

  /* === COULEURS SECONDAIRES === */
  --secondary: #f1f5f9;
  --secondary-foreground: #475569;
  --muted: #f1f5f9;
  --muted-foreground: #94a3b8;

  /* === ÉTATS === */
  --destructive: #D84A3A;
  --destructive-foreground: #FAFAFA;
  --success: #40A66D;
  --success-foreground: #FAFAFA;
  --warning: #D4A03A;
  --warning-foreground: #FAFAFA;
  --info: #5B7FAD;
  --info-foreground: #FAFAFA;

  /* === BORDURES ET INPUTS === */
  --border: #e2e8f0;
  --input: #f8fafc;
  --ring: #c17817;

  /* === GRAPHIQUES === */
  --chart-1: #c17817;
  --chart-2: #1e3a5f;
  --chart-3: #5B7FAD;
  --chart-4: #D4A03A;
  --chart-5: #5B6B8A;

  /* === RAYON DE BORDURE === */
  --radius: 0.5rem;
}

/* === UTILITAIRES DE COULEURS PERSONNALISÉS === */

/* Background colors */
.bg-background { background-color: var(--background); }
.bg-foreground { background-color: var(--foreground); }
.bg-card { background-color: var(--card); }
.bg-primary { background-color: var(--primary); }
.bg-primary-foreground { background-color: var(--primary-foreground); }
.bg-secondary { background-color: var(--secondary); }
.bg-muted { background-color: var(--muted); }
.bg-sidebar { background-color: var(--sidebar); }
.bg-sidebar-accent { background-color: var(--sidebar-accent); }
.bg-destructive { background-color: var(--destructive); }
.bg-success { background-color: var(--success); }
.bg-warning { background-color: var(--warning); }
.bg-info { background-color: var(--info); }
.bg-border { background-color: var(--border); }
.bg-input { background-color: var(--input); }
.bg-ring { background-color: var(--ring); }

/* Text colors */
.text-background { color: var(--background); }
.text-foreground { color: var(--foreground); }
.text-card { color: var(--card); }
.text-card-foreground { color: var(--card-foreground); }
.text-primary { color: var(--primary); }
.text-primary-foreground { color: var(--primary-foreground); }
.text-secondary { color: var(--secondary); }
.text-secondary-foreground { color: var(--secondary-foreground); }
.text-muted { color: var(--muted); }
.text-muted-foreground { color: var(--muted-foreground); }
.text-sidebar { color: var(--sidebar); }
.text-sidebar-foreground { color: var(--sidebar-foreground); }
.text-sidebar-accent-foreground { color: var(--sidebar-accent-foreground); }
.text-destructive { color: var(--destructive); }
.text-success { color: var(--success); }
.text-warning { color: var(--warning); }
.text-info { color: var(--info); }
.text-border { color: var(--border); }

/* Border colors */
.border-background { border-color: var(--background); }
.border-foreground { border-color: var(--foreground); }
.border-card { border-color: var(--card); }
.border-primary { border-color: var(--primary); }
.border-secondary { border-color: var(--secondary); }
.border-muted { border-color: var(--muted); }
.border-sidebar { border-color: var(--sidebar); }
.border-sidebar-border { border-color: var(--sidebar-border); }
.border-destructive { border-color: var(--destructive); }
.border-success { border-color: var(--success); }
.border-warning { border-color: var(--warning); }
.border-info { border-color: var(--info); }
.border-border { border-color: var(--border); }
.border-input { border-color: var(--input); }
.border-ring { border-color: var(--ring); }

/* Ring/Focus colors */
.ring-primary { --tw-ring-color: var(--primary); }
.ring-ring { --tw-ring-color: var(--ring); }
.ring-destructive { --tw-ring-color: var(--destructive); }

/* Hover states with opacity */
.hover\:bg-primary\/90:hover { background-color: rgba(193, 120, 23, 0.9); }
.hover\:bg-sidebar-accent:hover { background-color: var(--sidebar-accent); }
.hover\:text-sidebar-accent-foreground:hover { color: var(--sidebar-accent-foreground); }
.hover\:bg-secondary\/80:hover { background-color: rgba(241, 245, 249, 0.8); }
.hover\:bg-destructive\/90:hover { background-color: rgba(216, 74, 58, 0.9); }

/* Active/Special states */
.bg-primary\/10 { background-color: rgba(193, 120, 23, 0.1); }
.bg-success\/10 { background-color: rgba(64, 166, 109, 0.1); }
.bg-warning\/10 { background-color: rgba(212, 160, 58, 0.1); }
.bg-destructive\/10 { background-color: rgba(216, 74, 58, 0.1); }
.bg-muted\/30 { background-color: rgba(241, 245, 249, 0.3); }
.bg-muted\/50 { background-color: rgba(241, 245, 249, 0.5); }

/* Border opacity variants */
.border-success\/20 { border-color: rgba(64, 166, 109, 0.2); }
.border-warning\/20 { border-color: rgba(212, 160, 58, 0.2); }
.border-destructive\/20 { border-color: rgba(216, 74, 58, 0.2); }

/* === POLICE INTER === */
.font-inter { font-family: 'Inter', -apple-system, system-ui, sans-serif; }
.font-mono { font-family: 'Fira Code', 'Consolas', monospace; }

/* === TRANSITIONS STANDARD === */
.transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

/* === FOCUS RING === */
.focus\:ring-2:focus {
  outline: none;
  --tw-ring-offset-width: 2px;
  --tw-ring-width: 2px;
  --tw-ring-color: var(--ring);
  box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--background),
              0 0 0 calc(var(--tw-ring-width) + var(--tw-ring-offset-width)) var(--tw-ring-color);
}

.focus\:ring-primary:focus {
  --tw-ring-color: var(--primary);
}

.focus\:outline-none:focus {
  outline: none;
}

/* === SCROLLBAR STYLING === */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--background);
}

::-webkit-scrollbar-thumb {
  background: var(--muted-foreground);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--foreground);
}

/* === SÉLECTION === */
::selection {
  background-color: var(--primary);
  color: var(--primary-foreground);
}