/* ==========================================================================
   AudiVid Theme — Tokens (couleurs, typo, espacements, ombres)
   Modifier ici pour changer l'apparence de tout le site.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=Unbounded:wght@400;600;700;800&display=swap');

:root {
  /* --- Marque (logo AudiVid Promo) --- */
  --av-red-50:  #fff1f1;
  --av-red-100: #ffdcdc;
  --av-red-300: #ff7a7a;
  --av-red-400: #ff3b3b;
  --av-red-500: #ee1c25;   /* rouge principal du logo */
  --av-red-600: #cc0000;
  --av-red-700: #990000;   /* ancien #900 */
  --av-red-800: #660000;   /* ancien #600 */
  --av-red-900: #3a0000;

  --av-steel-100: #e7e5e5;
  --av-steel-300: #bdb8b8;
  --av-steel-500: #8e8989;  /* gris métallisé du logo */
  --av-steel-700: #5c5858;

  /* --- Surfaces (thème sombre par défaut) --- */
  --av-bg:          #0d0d0f;
  --av-bg-elev:     #141417;
  --av-surface:     #19191d;
  --av-surface-2:   #222227;
  --av-surface-3:   #2c2c33;
  --av-border:      #2e2e35;
  --av-border-soft: rgba(255, 255, 255, .06);

  /* --- Texte --- */
  --av-text:        #f5f4f4;
  --av-text-soft:   #c9c6c6;
  --av-text-muted:  #8f8b8b;
  --av-text-invert: #0d0d0f;

  /* --- Rôles --- */
  --av-primary:        var(--av-red-500);
  --av-primary-hover:  var(--av-red-400);
  --av-primary-press:  var(--av-red-600);
  --av-primary-soft:   rgba(238, 28, 37, .14);
  --av-on-primary:     #ffffff;
  --av-link:           var(--av-red-400);
  --av-link-hover:     var(--av-red-300);

  --av-success: #22c55e;
  --av-warning: #f5b014;
  --av-danger:  #ff3b3b;
  --av-info:    #38bdf8;

  /* --- Dégradés signature --- */
  --av-gradient-brand: linear-gradient(120deg, var(--av-red-800) 0%, var(--av-red-600) 45%, var(--av-red-500) 70%, var(--av-red-400) 100%);
  --av-gradient-steel: linear-gradient(135deg, #d9d6d6 0%, #8e8989 55%, #5c5858 100%);
  --av-gradient-glow:  radial-gradient(60% 60% at 50% 0%, rgba(238, 28, 37, .28) 0%, rgba(238, 28, 37, 0) 70%);

  /* --- Typographie --- */
  --av-font-display: 'Unbounded', 'Outfit', system-ui, sans-serif;
  --av-font-body:    'Outfit', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --av-font-mono:    ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

  --av-fs-xs:   .75rem;
  --av-fs-sm:   .875rem;
  --av-fs-base: 1rem;
  --av-fs-lg:   1.125rem;
  --av-fs-xl:   1.2rem;
  --av-fs-2xl:  clamp(1.2rem, 1.08rem + .5vw, 1.45rem);
  --av-fs-3xl:  clamp(1.4rem, 1.2rem + .9vw, 1.85rem);
  --av-fs-4xl:  clamp(1.75rem, 1.35rem + 1.8vw, 2.6rem);

  --av-lh-tight: 1.15;
  --av-lh-base:  1.6;

  /* --- Espacements / rayons --- */
  --av-space-1: .25rem;
  --av-space-2: .5rem;
  --av-space-3: .75rem;
  --av-space-4: 1rem;
  --av-space-5: 1.5rem;
  --av-space-6: 2rem;
  --av-space-7: 3rem;
  --av-space-8: 4rem;

  --av-radius-sm:   8px;
  --av-radius:      14px;
  --av-radius-lg:   22px;
  --av-radius-pill: 999px;

  /* --- Ombres / effets --- */
  --av-shadow-sm:   0 1px 2px rgba(0, 0, 0, .4);
  --av-shadow:      0 8px 24px rgba(0, 0, 0, .45);
  --av-shadow-lg:   0 20px 50px rgba(0, 0, 0, .55);
  --av-shadow-red:  0 10px 30px rgba(238, 28, 37, .35);
  --av-ring:        0 0 0 3px rgba(238, 28, 37, .35);

  --av-blur: saturate(160%) blur(14px);

  /* --- Mouvement --- */
  --av-ease:      cubic-bezier(.22, .61, .36, 1);
  --av-ease-out:  cubic-bezier(.16, 1, .3, 1);
  --av-dur-fast:  .15s;
  --av-dur:       .25s;
  --av-dur-slow:  .6s;

  /* --- Layout --- */
  --av-container: 1200px;
  --av-nav-h:     68px;

  color-scheme: dark;
}

/* --- Thème clair (activé via data-theme="light" sur <html>) --- */
:root[data-theme="light"] {
  --av-bg:          #f6f5f5;
  --av-bg-elev:     #ffffff;
  --av-surface:     #ffffff;
  --av-surface-2:   #f1efef;
  --av-surface-3:   #e6e3e3;
  --av-border:      #e2dede;
  --av-border-soft: rgba(0, 0, 0, .06);

  --av-text:        #151517;
  --av-text-soft:   #3d3b3b;
  --av-text-muted:  #6f6b6b;
  --av-text-invert: #ffffff;

  --av-primary-soft: rgba(238, 28, 37, .10);
  --av-link:         var(--av-red-600);
  --av-link-hover:   var(--av-red-700);

  --av-shadow-sm:  0 1px 2px rgba(20, 10, 10, .08);
  --av-shadow:     0 8px 24px rgba(20, 10, 10, .10);
  --av-shadow-lg:  0 20px 50px rgba(20, 10, 10, .14);
  --av-gradient-glow: radial-gradient(60% 60% at 50% 0%, rgba(238, 28, 37, .12) 0%, rgba(238, 28, 37, 0) 70%);

  color-scheme: light;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --av-dur-fast: 0s;
    --av-dur:      0s;
    --av-dur-slow: 0s;
  }
}