/* =====================================================================
   QU CORE — Design Tokens (v2 · brand kit v1.0 aligné)
   Variables CSS unifiées pour tout l'écosystème Quad Unlimited.
   Préserve les noms existants pour compat totale + introduit --qu-* canoniques.
   Brand kit canonique : ~/Desktop/QU_Brand_Kit_v1.0_Mai_2026.pdf
   ===================================================================== */

:root {
  /* ---------- BRAND / ACCENT ---------- */
  --qu-accent:        #FF5C00;     /* Orange signature (CTA, focus) — brand v1.0 */
  --qu-accent-2:      #FF7829;     /* Orange Hover — brand v1.0 */
  --qu-accent-3:      #CC4900;     /* Orange Sombre (pressed) — brand v1.0 */
  --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:          #F8B500;     /* Gold Premium — brand v1.0 */
  --qu-metal:         #A8A39C;     /* Métal brossé */
  --qu-metal-dark:    #6E6963;

  /* ---------- BASE (dark — défaut) ---------- */
  --qu-bg:            #06060A;     /* Carbone — brand v1.0 */
  --qu-bg-2:          #0F0F14;     /* Carbone Soft — brand v1.0 */
  --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:          #F4F4F5;     /* Texte principal — brand v1.0 */
  --qu-text-2:        #A1A1AA;     /* Texte secondaire — brand v1.0 */
  --qu-text-3:        #71717A;     /* Texte tertiaire — brand v1.0 */
  --qu-text-4:        #3F3F46;     /* Texte disabled — brand v1.0 */

  /* ---------- STATUS — brand v1.0 ---------- */
  --qu-green:         #10B981;     /* Succès */
  --qu-green-bg:      rgba(16,185,129,.12);
  --qu-red:           #EF4444;     /* Alerte */
  --qu-red-bg:        rgba(239,68,68,.12);
  --qu-blue:          #3B82F6;
  --qu-blue-bg:       rgba(59,130,246,.12);
  --qu-yellow:        #F59E0B;     /* Warning */
  --qu-yellow-bg:     rgba(245,158,11,.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);

  /* ---------- GRADIENTS ---------- */
  /* Boutons / CTA — la signature visuelle */
  --qu-grad-accent:        linear-gradient(135deg, #FF5C00 0%, #FFB066 100%);
  --qu-grad-accent-deep:   linear-gradient(135deg, var(--qu-accent), var(--qu-accent-3));
  --qu-grad-accent-soft:   linear-gradient(135deg, rgba(255,92,0,.22), rgba(255,60,0,.08));
  --qu-grad-gold:          linear-gradient(135deg, var(--qu-gold) 0%, #E0C273 100%);
  /* Barres / dividers / top edges */
  --qu-grad-accent-tri:    linear-gradient(90deg, var(--qu-accent-3), var(--qu-accent), var(--qu-accent-2));
  --qu-grad-accent-edge:   linear-gradient(90deg, transparent, var(--qu-accent), transparent);
  --qu-grad-divider:       linear-gradient(90deg, transparent, var(--qu-line-2), transparent);
  /* Surfaces / cards */
  --qu-grad-surface:       linear-gradient(180deg, var(--qu-bg-2) 0%, var(--qu-bg) 100%);
  --qu-grad-surface-diag:  linear-gradient(140deg, var(--qu-bg) 0%, var(--qu-bg-2) 100%);
  /* Effets */
  --qu-grad-shine:         linear-gradient(115deg, transparent 30%, rgba(255,255,255,.32) 50%, transparent 70%);
  --qu-grad-shine-soft:    linear-gradient(115deg, transparent 30%, rgba(255,255,255,.18) 50%, transparent 70%);
  --qu-grad-glow:          radial-gradient(ellipse at 50% 50%, rgba(255,92,0,.09), transparent 65%);
  --qu-grad-glow-strong:   radial-gradient(ellipse at 50% 50%, rgba(255,92,0,.18), transparent 60%);

  /* ---------- 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 — brand v1.0 : 2 polices uniquement ---------- */
  --qu-font-display:  'Chakra Petch', system-ui, sans-serif;          /* H1-H3, badges, prix, CTA, uppercase */
  --qu-font-ui:       'Chakra Petch', system-ui, sans-serif;          /* UI labels, nav, étiquettes */
  --qu-font-body:     'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;  /* Body, descriptions */
  --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;

  /* Fluid type — opt-in via clamp(min, preferred, max) */
  --qu-fs-fluid-body: clamp(0.95rem, 0.5vw + 0.85rem, 1.0625rem);
  --qu-fs-fluid-lead: clamp(1.0625rem, 0.8vw + 0.9rem, 1.25rem);
  --qu-fs-fluid-h3:   clamp(1.25rem, 1.5vw + 0.9rem, 1.75rem);
  --qu-fs-fluid-h2:   clamp(1.625rem, 2.5vw + 1rem, 2.5rem);
  --qu-fs-fluid-h1:   clamp(2rem, 4vw + 1rem, 3.75rem);
  --qu-fs-fluid-hero: clamp(2.5rem, 6vw + 1rem, 5.5rem);

  /* Fluid spacing — utile pour padding section / gutters */
  --qu-space-fluid-sm: clamp(0.75rem, 1.5vw, 1.25rem);
  --qu-space-fluid:    clamp(1rem,   2.5vw, 2rem);
  --qu-space-fluid-lg: clamp(1.5rem, 4vw,   3.5rem);
  --qu-space-fluid-xl: clamp(2rem,   6vw,   5rem);

  /* ---------- 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;
  }
}