/* ═══════════════════════════════════════════════════════════════
   ShippingFiles — Système de couleurs centralisé
   Brand : Navy #0A2540, Ocean #1E5F8E, Accent #E76F51,
           Green #2A9D8F, Yellow #E9C46A
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* Couleurs de marque (constantes) */
  --brand-navy: #0A2540;
  --brand-ocean: #1E5F8E;
  --brand-accent: #E76F51;
  --brand-green: #2A9D8F;
  --brand-yellow: #E9C46A;
  --brand-yellow-dark: #C9A03F;

  /* Mode clair (défaut) */
  --bg-primary: #FFFFFF;
  --bg-secondary: #F8F9FA;
  --bg-tertiary: #EDEDED;
  --bg-elevated: #FFFFFF;
  --bg-hover: #F0F2F5;

  --text-primary: #1A1F2C;
  --text-secondary: #4A5168;
  --text-tertiary: #6B7280;
  --text-on-brand: #FFFFFF;
  --text-link: var(--brand-ocean);
  --text-link-hover: var(--brand-navy);

  --border-default: #DDE2E8;
  --border-strong: #B0B8C4;
  --border-focus: var(--brand-ocean);

  --status-success: #1F8470;
  --status-success-bg: #E0F4F0;
  --status-warning: #B8860B;
  --status-warning-bg: #FFF6E5;
  --status-error: #C13B22;
  --status-error-bg: #FCE9E4;
  --status-info: var(--brand-ocean);
  --status-info-bg: #E5EEF5;

  --shadow-sm: 0 1px 3px rgba(10, 37, 64, 0.08);
  --shadow-md: 0 4px 12px rgba(10, 37, 64, 0.12);
  --shadow-lg: 0 8px 24px rgba(10, 37, 64, 0.16);

  --icon-color: var(--text-secondary);
  --icon-color-active: var(--brand-ocean);
}

/* Mode sombre — explicite via attribute */
:root[data-theme="dark"] {
  --bg-primary: #000000;
  --bg-secondary: #0A0A0A;
  --bg-tertiary: #141414;
  --bg-elevated: #0D0D0D;
  --bg-hover: #1C1C1C;

  --text-primary: #FFFFFF;
  --text-secondary: #D4D4D4;
  --text-tertiary: #A0A0A0;
  --text-on-brand: #FFFFFF;
  --text-link: #6FA8D6;
  --text-link-hover: #A8CDE8;

  --border-default: #2D3A4E;
  --border-strong: #4A5568;
  --border-focus: #6FA8D6;

  --status-success: #4FD1B0;
  --status-success-bg: rgba(79, 209, 176, 0.15);
  --status-warning: #F4C76D;
  --status-warning-bg: rgba(244, 199, 109, 0.15);
  --status-error: #F08A6F;
  --status-error-bg: rgba(240, 138, 111, 0.15);
  --status-info: #6FA8D6;
  --status-info-bg: rgba(111, 168, 214, 0.15);

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.6);

  --icon-color: var(--text-secondary);
  --icon-color-active: #6FA8D6;
}

/* Mode auto : suit la préférence système si pas d'override explicite */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    --bg-primary: #000000;
    --bg-secondary: #0A0A0A;
    --bg-tertiary: #141414;
    --bg-elevated: #0D0D0D;
    --bg-hover: #1C1C1C;
    --text-primary: #FFFFFF;
    --text-secondary: #D4D4D4;
    --text-tertiary: #A0A0A0;
    --text-link: #6FA8D6;
    --text-link-hover: #A8CDE8;
    --border-default: #2D3A4E;
    --border-strong: #4A5568;
    --border-focus: #6FA8D6;
    --status-success: #4FD1B0;
    --status-success-bg: rgba(79, 209, 176, 0.15);
    --status-warning: #F4C76D;
    --status-warning-bg: rgba(244, 199, 109, 0.15);
    --status-error: #F08A6F;
    --status-error-bg: rgba(240, 138, 111, 0.15);
    --status-info: #6FA8D6;
    --status-info-bg: rgba(111, 168, 214, 0.15);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.6);
    --icon-color-active: #6FA8D6;
  }
}

/* Transition douce lors du changement de thème (mais pas trop) */
* {
  transition: background-color 0.18s ease, color 0.12s ease, border-color 0.18s ease;
}

/* Utilitaires */
.theme-bg-primary { background: var(--bg-primary); }
.theme-bg-elevated { background: var(--bg-elevated); }
.theme-text { color: var(--text-primary); }
.theme-text-secondary { color: var(--text-secondary); }
.theme-text-muted { color: var(--text-tertiary); }
.theme-border { border-color: var(--border-default); }

.theme-link { color: var(--text-link); }
.theme-link:hover { color: var(--text-link-hover); }

.theme-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: 8px;
  box-shadow: var(--shadow-sm);
}

.status-success { color: var(--status-success); background: var(--status-success-bg); }
.status-warning { color: var(--status-warning); background: var(--status-warning-bg); }
.status-error   { color: var(--status-error);   background: var(--status-error-bg); }
.status-info    { color: var(--status-info);    background: var(--status-info-bg); }

/* Icônes SVG */
.icon {
  width: 20px; height: 20px;
  color: var(--icon-color);
  vertical-align: middle;
  flex-shrink: 0;
}
.icon-sm { width: 16px; height: 16px; }
.icon-lg { width: 24px; height: 24px; }
.icon-xl { width: 32px; height: 32px; }
.icon-active, .nav-item.active .icon { color: var(--icon-color-active); }
button:hover .icon { color: var(--brand-ocean); }

/* Bouton toggle thème */
#theme-toggle-btn {
  background: transparent;
  border: 1px solid var(--border-default);
  border-radius: 50%;
  width: 36px; height: 36px;
  font-size: 18px;
  cursor: pointer;
  color: var(--text-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
#theme-toggle-btn:hover {
  background: var(--bg-hover);
  border-color: var(--border-strong);
}

/* Skeleton loading */
.skeleton {
  background: linear-gradient(90deg, var(--bg-secondary) 0%, var(--bg-tertiary) 50%, var(--bg-secondary) 100%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
  border-radius: 4px;
}
@keyframes skeleton-loading { from { background-position: 200% 0; } to { background-position: -200% 0; } }