/* =====================================================================
   QU CORE — Design Tokens (v1)
   Variables CSS unifiées pour tout l'écosystème Quad Unlimited.
   Préserve les noms existants pour compat totale + introduit --qu-* canoniques.
   ===================================================================== */

:root {
  /* ---------- BRAND / ACCENT ---------- */
  --qu-accent:        #FF5C00;     /* Orange signature (CTA, focus) */
  --qu-accent-2:      #FF7A2E;     /* Orange clair (gradients) */
  --qu-accent-3:      #CC4900;     /* Orange foncé (pressed) */
  --qu-accent-bg:     rgba(255,92,0,.08);
  --qu-accent-bg-2:   rgba(255,92,0,.14);
  --qu-spark:         #FF9A4A;     /* Étincelle (logo echo) */
  --qu-gold:          #C9A84C;     /* Détails premium */
  --qu-metal:         #A8A39C;     /* Métal brossé */
  --qu-metal-dark:    #6E6963;

  /* ---------- BASE (dark — défaut) ---------- */
  --qu-bg:            #060607;     /* Fond app */
  --qu-bg-2:          #0E0E0E;     /* Card */
  --qu-bg-3:          #141414;     /* Card élevée */
  --qu-bg-4:          #1B1B1B;     /* Hover surface */
  --qu-bg-5:          #212121;     /* Input / elevated */

  --qu-line:          #262626;     /* Border subtle */
  --qu-line-2:        #353535;     /* Border hover */
  --qu-line-3:        #4A4A4A;     /* Border active */

  --qu-text:          #F3EFE8;     /* Texte principal */
  --qu-text-2:        #AAA5A0;     /* Texte secondaire */
  --qu-text-3:        #8C8881;     /* Texte tertiaire / muted */
  --qu-text-4:        #66625D;     /* Texte très discret */

  /* ---------- STATUS ---------- */
  --qu-green:         #22C55E;
  --qu-green-bg:      rgba(34,197,94,.12);
  --qu-red:           #EF4444;
  --qu-red-bg:        rgba(239,68,68,.12);
  --qu-blue:          #3B82F6;
  --qu-blue-bg:       rgba(59,130,246,.12);
  --qu-yellow:        #EAB308;
  --qu-yellow-bg:     rgba(234,179,8,.12);

  /* ---------- ELEVATION ---------- */
  --qu-shadow-sm:     0 2px 8px rgba(0,0,0,.25);
  --qu-shadow:        0 8px 32px rgba(0,0,0,.4);
  --qu-shadow-lg:     0 20px 60px rgba(0,0,0,.45);
  --qu-glow-accent:   0 0 20px rgba(255,92,0,.45);
  --qu-glow-accent-2: 0 0 40px rgba(255,92,0,.18);

  /* ---------- RADIUS ---------- */
  --qu-r-xs:          6px;
  --qu-r-sm:          10px;
  --qu-r:             14px;
  --qu-r-lg:          18px;
  --qu-r-xl:          24px;
  --qu-r-pill:        999px;

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

  /* ---------- TYPOGRAPHY ---------- */
  --qu-font-display:  'Bebas Neue', system-ui, sans-serif;
  --qu-font-ui:       'Barlow Condensed', 'Inter', system-ui, sans-serif;
  --qu-font-body:     'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --qu-font-mono:     ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Typography scale (rem-based, can be used directly: font-size: var(--qu-fs-md)) */
  --qu-fs-xs:         12px;     /* labels, eyebrows */
  --qu-fs-sm:         13.5px;   /* small body, meta */
  --qu-fs-md:         15.5px;   /* body default */
  --qu-fs-lg:         17px;     /* lead body, lists */
  --qu-fs-xl:         20px;     /* small heading */
  --qu-fs-2xl:        26px;     /* heading */
  --qu-fs-3xl:        34px;     /* page title */

  --qu-lh-tight:      1.25;
  --qu-lh-snug:       1.4;
  --qu-lh-normal:     1.55;     /* readable body default */
  --qu-lh-relaxed:    1.7;

  /* ---------- MOTION ---------- */
  --qu-ease:          cubic-bezier(.22, 1, .36, 1);
  --qu-ease-out:      cubic-bezier(.33, 1, .68, 1);
  --qu-ease-in:       cubic-bezier(.32, 0, .67, 0);
  --qu-ease-elastic:  cubic-bezier(.68, -0.55, .27, 1.55);
  --qu-dur-fast:      150ms;
  --qu-dur:           280ms;
  --qu-dur-slow:      480ms;

  /* ---------- LAYOUT ---------- */
  --qu-nav-h:         68px;
  --qu-container:     1200px;
  --qu-safe-top:      env(safe-area-inset-top, 0px);
  --qu-safe-bot:      env(safe-area-inset-bottom, 0px);

  /* ---------- Z-INDEX SCALE ---------- */
  --qu-z-base:        1;
  --qu-z-sticky:      100;
  --qu-z-nav:         500;
  --qu-z-drawer:      800;
  --qu-z-modal:       900;
  --qu-z-toast:       1000;
  --qu-z-cursor:      1100;

  /* =====================================================================
     COMPAT ALIASES — les apps existantes utilisent ces noms.
     Ne jamais supprimer : régression garantie.
     ===================================================================== */

  /* Main site (index.html) */
  --o:    var(--qu-accent);
  --o2:   var(--qu-accent-2);
  --o3:   var(--qu-accent-3);
  --obg:  var(--qu-accent-bg);
  --bg:   var(--qu-bg);
  --s1:   var(--qu-bg-2);
  --s2:   var(--qu-bg-3);
  --s3:   var(--qu-bg-4);
  --s4:   var(--qu-bg-5);
  --s5:   var(--qu-line);
  --s6:   var(--qu-line-2);
  --s7:   var(--qu-line-3);
  --t1:   var(--qu-text);
  --t2:   var(--qu-text-2);
  --t3:   var(--qu-text-3);
  --t4:   var(--qu-text-4);
  --gold: var(--qu-gold);
  --green:var(--qu-green);
  --nav:  var(--qu-nav-h);
  --fd:   var(--qu-font-display);
  --fc:   var(--qu-font-ui);
  --fb:   var(--qu-font-body);
  --e1:   var(--qu-ease);
  --e2:   var(--qu-ease-out);
  --e3:   var(--qu-ease-elastic);

  /* QU Suite (SAASHUBFINALindex.html) */
  --bg2:    var(--qu-bg-2);
  --bg3:    var(--qu-bg-3);
  --bg4:    var(--qu-bg-4);
  --bg5:    var(--qu-bg-5);
  --line:   var(--qu-line);
  --line2:  var(--qu-line-2);
  --text:   var(--qu-text);
  --muted:  var(--qu-text-3);
  --muted2: var(--qu-text-4);
  --accent: var(--qu-accent);
  --accent2:var(--qu-accent-2);
  --red:    var(--qu-red);
  --blue:   var(--qu-blue);
  --yellow: var(--qu-yellow);
  --shadow: var(--qu-shadow-lg);
  --r1:     var(--qu-r-lg);
  --r2:     var(--qu-r);
  --r3:     var(--qu-r-sm);
  --nav-h:  54px;
  --safe-top: var(--qu-safe-top);
  --safe-bot: var(--qu-safe-bot);

  /* Photo Studio (QUPHOTOindex.html) */
  --panel:  var(--qu-bg-2);
  --panel2: var(--qu-bg-3);
  --panel3: var(--qu-bg-4);
  --bd:     var(--qu-line);
  --tx:     var(--qu-text);
  --sub:    var(--qu-text-2);
  --good:   var(--qu-green);
  --warn:   var(--qu-yellow);
  --bad:    var(--qu-red);
  --radius:    var(--qu-r);
  --radius-sm: var(--qu-r-sm);
  --radius-xs: var(--qu-r-xs);
}

/* =====================================================================
   LIGHT THEME — activé via .light sur <html> ou <body>
   ===================================================================== */

:root.light,
.light {
  --qu-bg:     #F7F5F2;
  --qu-bg-2:   #EEECEA;
  --qu-bg-3:   #E6E3DF;
  --qu-bg-4:   #DCD7D1;
  --qu-bg-5:   #D1CBC3;
  --qu-line:   #CEC8BF;
  --qu-line-2: #B9B1A5;
  --qu-line-3: #9F968A;
  --qu-text:   #1A1714;
  --qu-text-2: #3E3A35;
  --qu-text-3: #6A645D;
  --qu-text-4: #8E887F;
}

/* Prefers-color-scheme fallback (si user n'a jamais touché au toggle) */
@media (prefers-color-scheme: light) {
  :root:not(.dark):not(.light) {
    --qu-bg:     #F7F5F2;
    --qu-bg-2:   #EEECEA;
    --qu-bg-3:   #E6E3DF;
    --qu-text:   #1A1714;
    --qu-text-2: #3E3A35;
    --qu-text-3: #6A645D;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  :root {
    --qu-dur-fast: 0ms;
    --qu-dur: 0ms;
    --qu-dur-slow: 0ms;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}