/* ============================================================================
   CREWDECK — DESIGN TOKENS
   Source de vérité pour toute l'identité visuelle.
   Palette extraite directement du logo officiel CrewDeck.
   ============================================================================ */

:root {
  /* ---- Brand (fixes — identiques en light & dark) -------------------- */
  --brand-red:          #E31E24; /* rouge principal — mesuré sur le logo CrewDeck */
  --brand-red-dark:     #B51218; /* pressed / hover foncé — mesuré sur le logo CrewDeck */
  --brand-red-tint-10:  #FDECEC; /* fond teinté très léger (badges, sélection) */
  --brand-ink:          #101114; /* quasi-noir de marque — mesuré sur le logo CrewDeck */
  --brand-titanium-900: #1C1C1E; /* extrémité foncée du dégradé des ailerons */
  --brand-titanium-500: #6E6E73; /* extrémité claire du dégradé des ailerons */
  --brand-titanium-300: #C7C7CC;

  /* ---- Semantic — LIGHT MODE ------------------------------------------ */
  --color-bg:              #F5F5F7;   /* fond global, gris Apple */
  --color-bg-elevated:     #FFFFFF;   /* app bar / modales */
  --color-surface:         #FFFFFF;   /* cartes */
  --color-surface-sunken:  #EFEFF2;   /* champs de saisie, chips */
  --color-text-primary:    var(--brand-ink);
  --color-text-secondary:  #6E6E73;
  --color-text-tertiary:   #98989D;
  --color-border:          rgba(5,0,26,0.08);
  --color-border-strong:   rgba(5,0,26,0.14);
  --color-primary:         var(--brand-red);
  --color-primary-hover:   #D71B1F;
  --color-primary-pressed: var(--brand-red-dark);
  --color-secondary:       var(--brand-titanium-900);
  --color-accent-tint:     var(--brand-red-tint-10);
  --shadow-color:          rgba(5,0,26,0.10);

  /* ---- États ------------------------------------------------------------ */
  --color-success: #2FAE60;
  --color-info:    #0A6CFF;
  --color-warning: #F5A400;
  --color-error:   var(--brand-red); /* le rouge de marque double comme couleur d'erreur */

  /* ---- Typographie ------------------------------------------------------ */
  --font-display: -apple-system, "SF Pro Display", "Inter", system-ui, sans-serif;
  --font-text:    -apple-system, "SF Pro Text", "Inter", system-ui, sans-serif;

  /* ---- Spacing scale (base 4px) ----------------------------------------- */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
  --space-12: 48px; --space-16: 64px;

  /* ---- Radius ------------------------------------------------------------ */
  --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px;
  --radius-xl: 20px; --radius-2xl: 28px; --radius-full: 999px;

  /* ---- Elevation (shadow) ------------------------------------------------ */
  --elevation-0: none;
  --elevation-1: 0 1px 2px rgba(5,0,26,0.04), 0 8px 24px -8px rgba(5,0,26,0.10);
  --elevation-2: 0 2px 6px rgba(5,0,26,0.06), 0 16px 32px -12px rgba(5,0,26,0.16);
  --elevation-3: 0 8px 16px rgba(5,0,26,0.10), 0 24px 48px -16px rgba(5,0,26,0.24);
  --elevation-4: 0 12px 24px rgba(233,34,38,0.22), 0 4px 8px rgba(5,0,26,0.12); /* FAB — teintée rouge */

  /* ---- Motion ------------------------------------------------------------ */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring:   cubic-bezier(0.16, 1, 0.3, 1);
  --duration-micro: 120ms;
  --duration-fast:  200ms;
  --duration-base:  260ms;
  --duration-sheet: 340ms;
}

[data-theme="dark"] {
  --color-bg:              #000000;
  --color-bg-elevated:     #0B0B0D;
  --color-surface:         #1C1C1E;
  --color-surface-sunken:  #2C2C2E;
  --color-text-primary:    #F5F5F7;
  --color-text-secondary:  #AEAEB2;
  --color-text-tertiary:   #6E6E73;
  --color-border:          rgba(255,255,255,0.08);
  --color-border-strong:   rgba(255,255,255,0.14);
  --color-primary:         #FF453A; /* rouge "système" dark-mode, même famille que le rouge de marque */
  --color-primary-hover:   #FF6961;
  --color-primary-pressed: #D93A31;
  --color-secondary:       var(--brand-titanium-300);
  --color-accent-tint:     rgba(233,34,38,0.14);
  --shadow-color:          rgba(0,0,0,0.6);

  --color-success: #32D74B;
  --color-info:    #409CFF;
  --color-warning: #FFB340;
  --color-error:   #FF453A;

  --elevation-1: 0 1px 2px rgba(0,0,0,0.4), 0 8px 24px -8px rgba(0,0,0,0.7);
  --elevation-2: 0 2px 6px rgba(0,0,0,0.5), 0 16px 32px -12px rgba(0,0,0,0.8);
  --elevation-3: 0 8px 16px rgba(0,0,0,0.5), 0 24px 48px -16px rgba(0,0,0,0.85);
  --elevation-4: 0 12px 24px rgba(255,69,58,0.28), 0 4px 8px rgba(0,0,0,0.5);
}