/* ==========================================================================
   CASCADE — Design Pack v1 — Tokens (SCOPED, NON-DESTRUCTIVE)
   --------------------------------------------------------------------------
   GARDE-FOU PERMANENT :
   Tous les tokens sont scopés sous `body[data-design-pack="v1"]`.
   Sans cet attribut, AUCUNE variable n'est exposée et aucun override ne
   peut s'activer. App v4 reste strictement identique.

   Source originale : ../../../cascade-design-pack/tokens.css
   Adaptations pour Cascade :
     - Scope `:root` → `body[data-design-pack="v1"]`
     - Renommage `data-profil` → `data-profile` (vocabulaire Cascade)
     - Mapping FR→EN : bassiste→bass, batteur→drums, chanteur→vocals,
                       pianiste→keys, guitariste→guitar, soufflant→wind
     - Profil supplémentaire `custom` (vocabulaire Cascade)
     - Asset paths absolus `/design/assets/...` (servis par FastAPI)
     - Suppression `--font-mono` (déjà défini dans Cascade :root)

   À charger AVANT overrides.css.
   ========================================================================== */

/* =========================================================================
   BASE (sombre) — actif uniquement si flag présent
   ========================================================================= */

body[data-design-pack="v1"] {
  /* ---------- Surfaces ---------- */
  --c-bg:          #0c0a08;
  --c-panel:       #15110d;
  --c-elevated:    #1d1813;
  --c-line:        rgba(212, 168, 95, .14);
  --c-line-strong: rgba(212, 168, 95, .28);
  --c-line-faint:  rgba(255, 240, 220, .06);

  /* ---------- Texte ---------- */
  --c-text-1:      #f4ead7;
  --c-text-2:      #c8b896;
  --c-text-3:      #8a7a5e;
  --c-text-4:      #5a4d3a;

  /* ---------- Accent (default = bass / cuivre — overridable par profil) ---------- */
  --accent-1:      #f0a02d;
  --accent-2:      #d4881a;
  --accent-3:      #8a5512;
  --accent-glow:   rgba(240, 160, 45, .35);

  /* ---------- Statuts ---------- */
  --c-ok:          #69b079;
  --c-warn:        #d49a2c;
  --c-danger:      #c14e3b;

  /* ---------- "Papier" Score view ---------- */
  --paper-bg:      #efe6d2;
  --paper-bg-soft: #e6dcc4;
  --paper-line:    #d6c9a8;
  --paper-ink-1:   #2a2218;
  --paper-ink-2:   #5a4a32;
  --paper-accent:  #8a5512;
  --paper-shadow-top: linear-gradient(to bottom, rgba(20,15,10,.55), transparent 28px);

  /* ---------- Typo (font-mono déjà fourni par Cascade :root) ---------- */
  --font-display: 'Fraunces', 'Source Serif 4', Georgia, serif;
  --font-ui:      'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-music:   'Bravura Text', 'Bravura', serif;

  /* échelle modulaire (1.25 — major third), base 16 */
  --t-12: 12px;
  --t-13: 13px;
  --t-14: 14px;
  --t-15: 15px;
  --t-16: 16px;
  --t-18: 18px;
  --t-20: 20px;
  --t-24: 24px;
  --t-30: 30px;
  --t-38: 38px;
  --t-48: 48px;
  --t-64: 64px;
  --t-80: 80px;

  /* graisses */
  --w-reg: 400;
  --w-med: 500;
  --w-sem: 600;
  --w-bld: 700;

  /* tracking */
  --ls-tight:   -0.02em;
  --ls-normal:  0;
  --ls-wide:    0.04em;
  --ls-caps:    0.14em;

  /* line-heights */
  --lh-tight:  1.05;
  --lh-snug:   1.25;
  --lh-base:   1.5;
  --lh-loose:  1.7;

  /* ---------- Espace (8-grid + demi-cran) ---------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 32px;
  --s-8: 40px;
  --s-9: 48px;
  --s-10: 64px;
  --s-11: 80px;
  --s-12: 96px;
  --s-13: 128px;

  /* ---------- Rayons (préfixés pour éviter collision avec --radius-* Cascade) ---------- */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-pill: 999px;

  /* ---------- Ombres (préfixées --sh-* pour éviter collision avec --shadow-* Cascade) ---------- */
  --sh-1: 0 1px 0 rgba(255,255,255,.04) inset, 0 1px 2px rgba(0,0,0,.5);
  --sh-2: 0 1px 0 rgba(255,255,255,.04) inset, 0 4px 12px rgba(0,0,0,.55);
  --sh-3: 0 1px 0 rgba(255,255,255,.05) inset, 0 12px 32px rgba(0,0,0,.6);
  --sh-glow: 0 0 0 1px var(--c-line-strong), 0 0 24px var(--accent-glow);

  /* ---------- Motion ---------- */
  --ease-out:    cubic-bezier(.2, .7, .2, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --d-fast: 120ms;
  --d-base: 200ms;
  --d-slow: 360ms;

  /* ---------- Hero defaults (overridés par data-profile) ---------- */
  --hero-img:    url('/design/assets/hero-bassiste.jpg');
  --hero-tint:   rgba(140, 70, 20, .35);
  --stem-channel: 'BASS';
}

/* =========================================================================
   PROFILS — vocabulaire Cascade (data-profile, EN/stem)
   Mappés sur les 6 profils musiciens du design pack + custom Cascade.
   ========================================================================= */

body[data-design-pack="v1"][data-profile="bass"] {
  --accent-1:    #f0a02d;
  --accent-2:    #d4881a;
  --accent-3:    #8a5512;
  --accent-glow: rgba(240, 160, 45, .35);
  --hero-img:    url('/design/assets/hero-bassiste.jpg');
  --hero-tint:   rgba(140, 70, 20, .35);
  --stem-channel: 'BASS';
}

body[data-design-pack="v1"][data-profile="drums"] {
  --accent-1:    #4ec9b0;
  --accent-2:    #2fa893;
  --accent-3:    #1a6b5e;
  --accent-glow: rgba(78, 201, 176, .32);
  --hero-img:    url('/design/assets/hero-batteur.jpg');
  --hero-tint:   rgba(60, 100, 90, .35);
  --stem-channel: 'DRUM';
}

body[data-design-pack="v1"][data-profile="vocals"] {
  --accent-1:    #e07a8a;
  --accent-2:    #c25768;
  --accent-3:    #7a3340;
  --accent-glow: rgba(224, 122, 138, .32);
  --hero-img:    url('/design/assets/hero-chanteur.jpg');
  --hero-tint:   rgba(120, 60, 70, .3);
  --stem-channel: 'VOX';
}

body[data-design-pack="v1"][data-profile="keys"] {
  --accent-1:    #c9a8e8;
  --accent-2:    #a685c8;
  --accent-3:    #5a4280;
  --accent-glow: rgba(201, 168, 232, .3);
  --hero-img:    url('/design/assets/hero-pianiste.jpg');
  --hero-tint:   rgba(80, 60, 100, .3);
  --stem-channel: 'KEYS';
}

body[data-design-pack="v1"][data-profile="guitar"] {
  --accent-1:    #98c875;
  --accent-2:    #76a553;
  --accent-3:    #406030;
  --accent-glow: rgba(152, 200, 117, .32);
  --hero-img:    url('/design/assets/hero-guitariste.jpg');
  --hero-tint:   rgba(80, 100, 50, .3);
  --stem-channel: 'GTR';
}

body[data-design-pack="v1"][data-profile="wind"] {
  --accent-1:    #e8b663;
  --accent-2:    #c89436;
  --accent-3:    #7a5818;
  --accent-glow: rgba(232, 182, 99, .32);
  --hero-img:    url('/design/assets/hero-soufflant.jpg');
  --hero-tint:   rgba(140, 90, 30, .3);
  --stem-channel: 'WIND';
}

body[data-design-pack="v1"][data-profile="custom"] {
  --accent-1:    #f0a02d;
  --accent-2:    #d4881a;
  --accent-3:    #8a5512;
  --accent-glow: rgba(240, 160, 45, .35);
  --hero-img:    url('/design/assets/hero-mix.jpg');
  --hero-tint:   rgba(140, 70, 20, .35);
  --stem-channel: 'MIX';
}

/* hero-cordes.jpg dispo dans /design/assets/ — utilisable pour futur
   profil "cordes" (cello / violon orchestral). Pas de selector actif
   dans Cascade vocab actuel (bass/drums/guitar/vocals/keys/wind/custom). */

/* =========================================================================
   MODE JOUR — surface inverse, mêmes accents (toggle data-mode="light")
   ========================================================================= */

body[data-design-pack="v1"][data-mode="light"] {
  --c-bg:          #f4ecda;
  --c-panel:       #ebe1c8;
  --c-elevated:    #fbf3df;
  --c-line:        rgba(80, 50, 20, .14);
  --c-line-strong: rgba(80, 50, 20, .28);
  --c-line-faint:  rgba(80, 50, 20, .06);

  --c-text-1:      #1d1610;
  --c-text-2:      #4d3e2a;
  --c-text-3:      #7a6749;
  --c-text-4:      #a89677;

  --paper-bg:      #fbf6e8;
  --paper-bg-soft: #f4eed8;
  --paper-line:    #d8c89e;
  --paper-ink-1:   #2a2218;
  --paper-ink-2:   #5a4a32;

  --sh-1: 0 1px 0 rgba(255,255,255,.6) inset, 0 1px 2px rgba(80,50,20,.12);
  --sh-2: 0 1px 0 rgba(255,255,255,.6) inset, 0 4px 16px rgba(80,50,20,.16);
  --sh-3: 0 1px 0 rgba(255,255,255,.7) inset, 0 12px 32px rgba(80,50,20,.18);
}

/* =========================================================================
   DENSITÉ / RADIUS / OMBRES / TYPO — modificateurs optionnels
   ========================================================================= */

body[data-design-pack="v1"][data-densite="compact"] {
  --s-3: 8px; --s-4: 12px; --s-5: 16px; --s-6: 20px; --s-7: 24px;
}
body[data-design-pack="v1"][data-densite="aere"] {
  --s-3: 14px; --s-4: 20px; --s-5: 28px; --s-6: 36px; --s-7: 48px;
}

body[data-design-pack="v1"][data-radius="vif"] {
  --r-sm: 3px; --r-md: 4px; --r-lg: 6px; --r-xl: 8px;
}
body[data-design-pack="v1"][data-radius="rond"] {
  --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px;
}

body[data-design-pack="v1"][data-shadows="legeres"] {
  --sh-1: 0 1px 0 rgba(255,255,255,.03) inset, 0 1px 1px rgba(0,0,0,.3);
  --sh-2: 0 1px 0 rgba(255,255,255,.03) inset, 0 2px 6px rgba(0,0,0,.35);
  --sh-3: 0 1px 0 rgba(255,255,255,.03) inset, 0 6px 14px rgba(0,0,0,.4);
}
body[data-design-pack="v1"][data-shadows="profondes"] {
  --sh-1: 0 1px 0 rgba(255,255,255,.05) inset, 0 2px 4px rgba(0,0,0,.6);
  --sh-2: 0 1px 0 rgba(255,255,255,.05) inset, 0 8px 24px rgba(0,0,0,.7);
  --sh-3: 0 1px 0 rgba(255,255,255,.07) inset, 0 24px 64px rgba(0,0,0,.75);
}

body[data-design-pack="v1"][data-typo="serif"]    { --font-display: 'Fraunces', 'Source Serif 4', Georgia, serif; }
body[data-design-pack="v1"][data-typo="contemp"]  { --font-display: 'Instrument Serif', 'Fraunces', Georgia, serif; }
body[data-design-pack="v1"][data-typo="grotesk"]  { --font-display: 'Space Grotesk', 'Inter', sans-serif; }
body[data-design-pack="v1"][data-typo="mono"]     { --font-display: var(--font-mono); }