/**
 * RCC Steampunk Design System
 * Système de design Victorian-Industriel avec esthétique mécanique
 * Version: 1.0.0
 */

/* ========================================
   PALETTE COULEURS STEAMPUNK
   ======================================== */

:root {
  /* Métaux - Cuivre & Bronze */
  --rcc-copper-900: #4a2c1c;
  --rcc-copper-800: #6b3e2e;
  --rcc-copper-700: #8b5a3c;
  --rcc-copper-600: #b87333;
  --rcc-copper-500: #cd7f32;
  --rcc-copper-400: #d4955a;
  --rcc-copper-300: #e0b077;
  --rcc-copper-200: #efd5a8;
  --rcc-copper-100: #f5e6d3;

  /* Métaux - Laiton & Or */
  --rcc-brass-900: #4d3d00;
  --rcc-brass-800: #6b5500;
  --rcc-brass-700: #8b7000;
  --rcc-brass-600: #b8860b;
  --rcc-brass-500: #daa520;
  --rcc-brass-400: #e5b84a;
  --rcc-brass-300: #f0cb74;
  --rcc-brass-200: #f5dea3;
  --rcc-brass-100: #faf0d1;

  /* Métaux - Fer & Acier */
  --rcc-iron-900: #1a1a1a;
  --rcc-iron-800: #2c2c2c;
  --rcc-iron-700: #3f3f3f;
  --rcc-iron-600: #5a5a5a;
  --rcc-iron-500: #808080;
  --rcc-iron-400: #a0a0a0;
  --rcc-iron-300: #b8b8b8;
  --rcc-iron-200: #d3d3d3;
  --rcc-iron-100: #e8e8e8;

  /* Bois & Cuir Victorian */
  --rcc-wood-900: #2b1810;
  --rcc-wood-800: #3d2417;
  --rcc-wood-700: #5a3825;
  --rcc-wood-600: #6f4e37;
  --rcc-wood-500: #8b6f47;
  --rcc-wood-400: #a68a64;
  --rcc-wood-300: #c4a57b;
  --rcc-wood-200: #d4c5a9;
  --rcc-wood-100: #e8e0d5;

  /* Steam & Vapeur */
  --rcc-steam-900: #4a5568;
  --rcc-steam-800: #5d6d7e;
  --rcc-steam-700: #718096;
  --rcc-steam-600: #8b9dc3;
  --rcc-steam-500: #a0aec0;
  --rcc-steam-400: #b8c5d6;
  --rcc-steam-300: #cbd5e0;
  --rcc-steam-200: #e2e8f0;
  --rcc-steam-100: #f7fafc;

  /* Accents - Rouge & Ambre */
  --rcc-ember-900: #5c1a1a;
  --rcc-ember-800: #7f2020;
  --rcc-ember-700: #991b1b;
  --rcc-ember-600: #b91c1c;
  --rcc-ember-500: #dc2626;
  --rcc-ember-400: #ef4444;
  --rcc-ember-300: #f87171;
  --rcc-ember-200: #fca5a5;
  --rcc-ember-100: #fee2e2;

  /* Backgrounds Victorian */
  --rcc-parchment-dark: #2b2520;
  --rcc-parchment-base: #e8dcc4;
  --rcc-parchment-light: #f5f0e8;
  --rcc-leather-dark: #3d2e2a;
  --rcc-leather-base: #6b5447;
}

/* ========================================
   THÈME CLAIR (Default Victorian)
   ======================================== */

:root,
[data-theme="light"] {
  /* Surfaces */
  --rcc-bg-primary: var(--rcc-parchment-light);
  --rcc-bg-secondary: var(--rcc-parchment-base);
  --rcc-bg-tertiary: var(--rcc-wood-100);
  --rcc-bg-accent: var(--rcc-copper-100);

  /* Textes */
  --rcc-text-primary: var(--rcc-iron-900);
  --rcc-text-secondary: var(--rcc-wood-900);
  --rcc-text-tertiary: var(--rcc-iron-700);
  --rcc-text-inverse: var(--rcc-steam-100);

  /* Bordures & Dividers */
  --rcc-border-primary: var(--rcc-copper-400);
  --rcc-border-secondary: var(--rcc-iron-300);
  --rcc-border-accent: var(--rcc-brass-500);

  /* Interactifs */
  --rcc-link: var(--rcc-ember-600);
  --rcc-link-hover: var(--rcc-ember-700);
  --rcc-button-primary-bg: var(--rcc-copper-600);
  --rcc-button-primary-text: var(--rcc-parchment-light);
  --rcc-button-primary-hover: var(--rcc-copper-700);

  /* États */
  --rcc-focus: var(--rcc-brass-500);
  --rcc-success: var(--rcc-wood-600);
  --rcc-warning: var(--rcc-brass-600);
  --rcc-error: var(--rcc-ember-600);

  /* Shadows */
  --rcc-shadow-color: rgba(74, 44, 28, 0.3);
  --rcc-glow-color: rgba(218, 165, 32, 0.4);
}

/* ========================================
   THÈME SOMBRE (Night Industrial)
   ======================================== */

[data-theme="dark"] {
  /* Surfaces */
  --rcc-bg-primary: var(--rcc-iron-900);
  --rcc-bg-secondary: var(--rcc-parchment-dark);
  --rcc-bg-tertiary: var(--rcc-leather-dark);
  --rcc-bg-accent: var(--rcc-copper-900);

  /* Textes */
  --rcc-text-primary: var(--rcc-steam-100);
  --rcc-text-secondary: var(--rcc-parchment-base);
  --rcc-text-tertiary: var(--rcc-steam-300);
  --rcc-text-inverse: var(--rcc-iron-900);

  /* Bordures & Dividers */
  --rcc-border-primary: var(--rcc-copper-600);
  --rcc-border-secondary: var(--rcc-iron-600);
  --rcc-border-accent: var(--rcc-brass-600);

  /* Interactifs */
  --rcc-link: var(--rcc-ember-400);
  --rcc-link-hover: var(--rcc-ember-300);
  --rcc-button-primary-bg: var(--rcc-copper-600);
  --rcc-button-primary-text: var(--rcc-parchment-light);
  --rcc-button-primary-hover: var(--rcc-copper-500);

  /* États */
  --rcc-focus: var(--rcc-brass-400);
  --rcc-success: var(--rcc-wood-400);
  --rcc-warning: var(--rcc-brass-400);
  --rcc-error: var(--rcc-ember-400);

  /* Shadows */
  --rcc-shadow-color: rgba(26, 26, 26, 0.6);
  --rcc-glow-color: rgba(205, 127, 50, 0.5);
}

/* ========================================
   TYPOGRAPHIE VICTORIENNE
   ======================================== */

:root {
  /* Familles de polices */
  --rcc-font-serif: 'Playfair Display', 'Georgia', serif;
  --rcc-font-sans: 'Roboto Slab', 'Georgia', serif;
  --rcc-font-mono: 'Courier Prime', 'Courier New', monospace;
  --rcc-font-display: 'Cinzel', 'Times New Roman', serif;

  /* Échelle typographique */
  --rcc-text-xs: 0.75rem;      /* 12px */
  --rcc-text-sm: 0.875rem;     /* 14px */
  --rcc-text-base: 1rem;       /* 16px */
  --rcc-text-lg: 1.125rem;     /* 18px */
  --rcc-text-xl: 1.25rem;      /* 20px */
  --rcc-text-2xl: 1.5rem;      /* 24px */
  --rcc-text-3xl: 1.875rem;    /* 30px */
  --rcc-text-4xl: 2.25rem;     /* 36px */
  --rcc-text-5xl: 3rem;        /* 48px */

  /* Line heights */
  --rcc-leading-tight: 1.25;
  --rcc-leading-normal: 1.5;
  --rcc-leading-relaxed: 1.75;
  --rcc-leading-loose: 2;

  /* Font weights */
  --rcc-font-normal: 400;
  --rcc-font-medium: 500;
  --rcc-font-semibold: 600;
  --rcc-font-bold: 700;
}

/* ========================================
   ESPACEMENT VICTORIEN
   ======================================== */

:root {
  --rcc-space-1: 0.25rem;   /* 4px */
  --rcc-space-2: 0.5rem;    /* 8px */
  --rcc-space-3: 0.75rem;   /* 12px */
  --rcc-space-4: 1rem;      /* 16px */
  --rcc-space-5: 1.25rem;   /* 20px */
  --rcc-space-6: 1.5rem;    /* 24px */
  --rcc-space-8: 2rem;      /* 32px */
  --rcc-space-10: 2.5rem;   /* 40px */
  --rcc-space-12: 3rem;     /* 48px */
  --rcc-space-16: 4rem;     /* 64px */
  --rcc-space-20: 5rem;     /* 80px */
  --rcc-space-24: 6rem;     /* 96px */
}

/* ========================================
   OMBRES & PROFONDEUR INDUSTRIELLE
   ======================================== */

:root {
  /* Ombres classiques */
  --rcc-shadow-sm: 0 1px 2px 0 var(--rcc-shadow-color);
  --rcc-shadow-md: 0 4px 6px -1px var(--rcc-shadow-color);
  --rcc-shadow-lg: 0 10px 15px -3px var(--rcc-shadow-color);
  --rcc-shadow-xl: 0 20px 25px -5px var(--rcc-shadow-color);
  --rcc-shadow-2xl: 0 25px 50px -12px var(--rcc-shadow-color);

  /* Ombres intérieures (métal gravé) */
  --rcc-shadow-inset: inset 0 2px 4px 0 var(--rcc-shadow-color);
  --rcc-shadow-engraved: inset 0 2px 8px 0 var(--rcc-shadow-color);

  /* Brillance métallique */
  --rcc-glow-sm: 0 0 10px var(--rcc-glow-color);
  --rcc-glow-md: 0 0 20px var(--rcc-glow-color);
  --rcc-glow-lg: 0 0 30px var(--rcc-glow-color);

  /* Effet rivet */
  --rcc-rivet-shadow:
    inset 0 1px 2px rgba(255, 255, 255, 0.3),
    inset 0 -1px 2px var(--rcc-shadow-color),
    0 2px 4px var(--rcc-shadow-color);
}

/* ========================================
   BORDURES STEAMPUNK
   ======================================== */

:root {
  --rcc-border-width-thin: 1px;
  --rcc-border-width-base: 2px;
  --rcc-border-width-thick: 3px;
  --rcc-border-width-heavy: 4px;

  --rcc-border-radius-none: 0;
  --rcc-border-radius-sm: 2px;
  --rcc-border-radius-md: 4px;
  --rcc-border-radius-lg: 6px;
  --rcc-border-radius-xl: 8px;
  --rcc-border-radius-full: 9999px;
}

/* ========================================
   TRANSITIONS MÉCANIQUES
   ======================================== */

:root {
  /* Durées */
  --rcc-duration-instant: 100ms;
  --rcc-duration-fast: 200ms;
  --rcc-duration-base: 300ms;
  --rcc-duration-slow: 500ms;
  --rcc-duration-slower: 700ms;

  /* Courbes (mécaniques) */
  --rcc-ease-linear: linear;
  --rcc-ease-in: cubic-bezier(0.4, 0, 1, 1);
  --rcc-ease-out: cubic-bezier(0, 0, 0.2, 1);
  --rcc-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --rcc-ease-mechanical: cubic-bezier(0.65, 0, 0.35, 1);
  --rcc-ease-gear: cubic-bezier(0.68, -0.55, 0.265, 1.55);

  /* Transitions communes */
  --rcc-transition-base: all var(--rcc-duration-base) var(--rcc-ease-mechanical);
  --rcc-transition-fast: all var(--rcc-duration-fast) var(--rcc-ease-mechanical);
  --rcc-transition-color: color var(--rcc-duration-fast) var(--rcc-ease-out);
}

/* ========================================
   ANIMATIONS MÉCANIQUES
   ======================================== */

/* Rotation d'engrenage */
@keyframes rcc-gear-rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Rotation inverse (engrenages liés) */
@keyframes rcc-gear-rotate-reverse {
  from {
    transform: rotate(360deg);
  }
  to {
    transform: rotate(0deg);
  }
}

/* Piston vertical */
@keyframes rcc-piston-pump {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

/* Balancement de pendule */
@keyframes rcc-pendulum-swing {
  0%, 100% {
    transform: rotate(-10deg);
  }
  50% {
    transform: rotate(10deg);
  }
}

/* Pulsation de vapeur */
@keyframes rcc-steam-pulse {
  0%, 100% {
    opacity: 0.3;
    transform: scale(1);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.05);
  }
}

/* Brillance métallique */
@keyframes rcc-metal-shine {
  0% {
    background-position: -100% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

/* Cliquetis mécanique (micro shake) */
@keyframes rcc-mechanical-tick {
  0%, 100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-1px);
  }
  75% {
    transform: translateX(1px);
  }
}

/* Levée de levier */
@keyframes rcc-lever-pull {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(-25deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

/* ========================================
   CLASSES UTILITAIRES STEAMPUNK
   ======================================== */

/* Effet métal brossé */
.rcc-metal-brushed {
  background: linear-gradient(
    135deg,
    var(--rcc-copper-600) 0%,
    var(--rcc-copper-400) 45%,
    var(--rcc-copper-600) 50%,
    var(--rcc-copper-400) 55%,
    var(--rcc-copper-600) 100%
  );
  background-size: 200% 100%;
}

/* Effet cuivre poli */
.rcc-copper-polished {
  background: linear-gradient(
    to bottom,
    var(--rcc-copper-400),
    var(--rcc-copper-600),
    var(--rcc-copper-500)
  );
  box-shadow: var(--rcc-shadow-md), var(--rcc-glow-sm);
}

/* Effet laiton antique */
.rcc-brass-antique {
  background: linear-gradient(
    to bottom,
    var(--rcc-brass-400),
    var(--rcc-brass-600),
    var(--rcc-brass-500)
  );
  box-shadow: var(--rcc-shadow-inset);
}

/* Rivet métallique */
.rcc-rivet {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(
    circle at 30% 30%,
    var(--rcc-iron-300),
    var(--rcc-iron-600)
  );
  box-shadow: var(--rcc-rivet-shadow);
}

/* Plaque métallique */
.rcc-metal-plate {
  background: var(--rcc-iron-700);
  border: var(--rcc-border-width-base) solid var(--rcc-iron-600);
  box-shadow: var(--rcc-shadow-inset), var(--rcc-shadow-md);
  position: relative;
}

/* Cadre Victorian ornemental */
.rcc-frame-ornate {
  border: var(--rcc-border-width-thick) solid var(--rcc-copper-600);
  border-radius: var(--rcc-border-radius-md);
  box-shadow:
    inset 0 0 0 1px var(--rcc-brass-400),
    var(--rcc-shadow-lg);
  padding: var(--rcc-space-6);
}

/* Texture cuir */
.rcc-leather-texture {
  background: var(--rcc-leather-base);
  background-image:
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 10px,
      rgba(0, 0, 0, 0.05) 10px,
      rgba(0, 0, 0, 0.05) 20px
    );
}

/* Engrenage décoratif */
.rcc-gear-spin {
  animation: rcc-gear-rotate 4s linear infinite;
}

.rcc-gear-spin-reverse {
  animation: rcc-gear-rotate-reverse 4s linear infinite;
}

/* Brillance au survol */
.rcc-shine-hover {
  position: relative;
  overflow: hidden;
}

.rcc-shine-hover::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent
  );
  transition: left var(--rcc-duration-slow) var(--rcc-ease-out);
}

.rcc-shine-hover:hover::before {
  left: 100%;
}

/* ========================================
   STYLES GLOBAUX DE BASE
   ======================================== */

/* Reset des liens par défaut du navigateur */
a,
a:link {
  color: var(--rcc-link) !important;
  text-decoration: none;
  transition: var(--rcc-transition-color);
}

a:hover,
a:active {
  color: var(--rcc-link-hover) !important;
}

a:visited {
  color: var(--rcc-link) !important;
}

/* Reset du body */
body {
  color: var(--rcc-text-primary);
  background-color: var(--rcc-bg-primary);
}

/* Force les couleurs de texte */
p, span, div, li, td, th {
  color: inherit;
}

/* Force les couleurs des headings */
h1, h2, h3, h4, h5, h6 {
  color: var(--rcc-text-primary);
}

/* ========================================
   COMPOSANTS DE BASE
   ======================================== */

.rcc-button {
  display: inline-flex;
  align-items: center;
  gap: var(--rcc-space-2);
  padding: var(--rcc-space-3) var(--rcc-space-6);
  font-family: var(--rcc-font-sans);
  font-size: var(--rcc-text-base);
  font-weight: var(--rcc-font-semibold);
  color: var(--rcc-button-primary-text);
  background: var(--rcc-button-primary-bg);
  border: var(--rcc-border-width-base) solid var(--rcc-copper-700);
  border-radius: var(--rcc-border-radius-md);
  box-shadow: var(--rcc-shadow-md);
  cursor: pointer;
  transition: var(--rcc-transition-base);
  text-decoration: none;
}

.rcc-button:hover {
  background: var(--rcc-button-primary-hover);
  box-shadow: var(--rcc-shadow-lg);
  transform: translateY(-1px);
}

.rcc-button:active {
  transform: translateY(0);
  box-shadow: var(--rcc-shadow-sm);
}

.rcc-card {
  background: var(--rcc-bg-secondary);
  border: var(--rcc-border-width-base) solid var(--rcc-border-primary);
  border-radius: var(--rcc-border-radius-lg);
  padding: var(--rcc-space-6);
  box-shadow: var(--rcc-shadow-lg);
  transition: var(--rcc-transition-base);
}

.rcc-card:hover {
  box-shadow: var(--rcc-shadow-xl);
  transform: translateY(-2px);
}

/* ========================================
   GRILLE & LAYOUT
   ======================================== */

.rcc-container {
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--rcc-space-4);
  padding-right: var(--rcc-space-4);
}

.rcc-grid {
  display: grid;
  gap: var(--rcc-space-6);
}

.rcc-flex {
  display: flex;
  gap: var(--rcc-space-4);
}

/* ========================================
   ACCESSIBILITÉ
   ======================================== */

.rcc-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Focus visible pour clavier */
*:focus-visible {
  outline: 3px solid var(--rcc-focus);
  outline-offset: 2px;
}

/* ========================================
   RESPONSIVE UTILITIES
   ======================================== */

@media (max-width: 640px) {
  :root {
    --rcc-text-base: 0.9375rem; /* 15px */
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ========================================
   PRINT STYLES
   ======================================== */

@media print {
  :root {
    --rcc-bg-primary: white;
    --rcc-text-primary: black;
  }

  .rcc-no-print {
    display: none !important;
  }
}