/* Copie de LastParadox/1980/design/design-tokens.css (source de vérité de la charte « 1980 »).
   Ne pas modifier ici : modifier la source puis recopier. */

/* ==========================================================================
   design-tokens.css — Charte « rétro 80s » : orange, rouille, brun, blanc sable
   Source de vérité des couleurs, polices, tailles et de l'effet VHS.
   Ne jamais écrire de valeur hex en dur dans les composants : utiliser ces variables.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Space+Grotesk:wght@400;500;700&family=Space+Mono:wght@400;700&display=swap");

:root {
  /* ---------- 1. Palette brute (ne change jamais selon le thème) ---------- */
  --c-burnt-black: #1C120C;  /* noir brûlé : fond sombre, texte sur orange */
  --c-cocoa:       #3B2418;  /* brun cacao */
  --c-earth:       #7A3E1D;  /* brun terre */
  --c-brick:       #A8321F;  /* rouge brique */
  --c-rust:        #D9541E;  /* orange rouille */
  --c-sun:         #F08A24;  /* orange soleil */
  --c-mustard:     #E3A82B;  /* moutarde */
  --c-sand:        #C9A978;  /* sable foncé */
  --c-cream:       #F2E3C3;  /* crème papier */
  --c-teal:        #3E7C79;  /* bleu-vert poussière : accent froid, rare */

  /* ---------- 2. Surfaces et textes (thème clair = défaut, blanc sable) ---------- */
  --bg:            #F5EBD6;  /* fond d'écran : blanc sable */
  --bg-panel:      #EADBBC;  /* panneaux, timeline, barres, récapitulatifs */
  --text:          #2A1A10;  /* texte principal */
  --text-muted:    #7A3E1D;  /* libellés secondaires, métadonnées */
  --line:          #C9A978;  /* filets, séparateurs */
  --line-strong:   #B89A6A;  /* bordures de boutons non sélectionnés, zones pointillées */
  --media-bg:      #3B2418;  /* fond des aperçus vidéo et vignettes : reste sombre */
  --media-text:    #F2E3C3;  /* texte sur aperçus vidéo */

  /* ---------- 3. Accents ---------- */
  --accent:        #F08A24;  /* fond de bouton principal, état actif, tête de lecture */
  --on-accent:     #1C120C;  /* texte et icônes SUR --accent */
  --accent-text:   #A8321F;  /* orange utilisé COMME TEXTE sur fond clair (contraste AA) */
  --danger:        #A8321F;
  --info:          #3E7C79;

  /* ---------- 4. Typographie ---------- */
  --font-display:  "Bebas Neue", Impact, sans-serif;                          /* titres, MAJUSCULES */
  --font-body:     "Space Grotesk", system-ui, sans-serif;                    /* texte et boutons */
  --font-mono:     "Space Mono", ui-monospace, "SFMono-Regular", monospace;   /* timecodes, libellés techniques */

  --fs-display:    64px;   /* grands titres d'écran, line-height 0.95, letter-spacing 2px */
  --fs-title:      18px;
  --fs-body:       15px;
  --fs-label:      12px;   /* libellés mono, MAJUSCULES, letter-spacing 1.5px */
  --fs-micro:      11px;

  /* ---------- 5. Forme et espacement ---------- */
  --radius-sm:     2px;    /* badges */
  --radius:        4px;    /* boutons, clips, pastilles */
  --radius-md:     6px;    /* vignettes, cartes */
  --radius-lg:     12px;   /* panneaux arrondis (timeline) */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px;  --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px;
  --touch-min:     48px;   /* taille minimale d'une cible tactile */

  /* ---------- 6. Effet VHS (voir .vhs plus bas) ---------- */
  --vhs-k:         0.6;    /* intensité 0 → 1 ; 0 = effet invisible */
}

/* ---------- Thème sombre (optionnel) : <html data-theme="dark"> ---------- */
[data-theme="dark"] {
  --bg:            #1C120C;
  --bg-panel:      #3B2418;
  --text:          #F2E3C3;
  --text-muted:    #C9A978;
  --line:          #7A3E1D;
  --line-strong:   #7A3E1D;
  --accent-text:   #F08A24;
}

/* ---------- Base ---------- */
html { background: var(--bg); color: var(--text); font-family: var(--font-body); }

.t-display {
  font-family: var(--font-display); font-weight: 400; font-size: var(--fs-display);
  line-height: 0.95; letter-spacing: 2px; text-transform: uppercase; color: var(--text);
}
.t-label {
  font-family: var(--font-mono); font-size: var(--fs-label);
  letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-muted);
}
.t-mono { font-family: var(--font-mono); }

/* ---------- Boutons ---------- */
.btn {
  min-height: var(--touch-min); padding: 0 var(--space-5); border-radius: var(--radius);
  font: 700 16px var(--font-body); letter-spacing: 1.5px; text-transform: uppercase;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
}
.btn-primary   { background: var(--accent); color: var(--on-accent); border: 0; }
.btn-secondary { background: transparent; color: var(--text); border: 1.5px solid var(--text); }
.btn-option    { background: transparent; color: var(--text); border: 1.5px solid var(--line-strong); font-weight: 500; }
.btn-option[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 700; }

/* ---------- Panneaux et vignettes ---------- */
.panel { background: var(--bg-panel); border-radius: var(--radius-md); }
.media { background: var(--media-bg); color: var(--media-text); border-radius: var(--radius-md); overflow: hidden; }
.badge-media {
  background: var(--c-burnt-black); color: var(--c-cream);
  font: 400 11px var(--font-mono); padding: 2px 6px; border-radius: var(--radius-sm);
}

/* ---------- Clips de timeline (une couleur par type de piste) ---------- */
.clip           { height: 44px; border-radius: var(--radius); padding: 6px 8px; font: 700 11px var(--font-mono); }
.clip-video-a   { background: var(--c-sun);     color: var(--c-burnt-black); }
.clip-video-b   { background: var(--c-mustard); color: var(--c-burnt-black); }
.clip-video-c   { background: var(--c-brick);   color: var(--c-cream); }
.clip-text      { background: var(--c-cocoa);   color: var(--c-cream); height: 36px; }
.clip-audio     { background: var(--c-teal);    color: var(--c-cream); height: 36px; }
.clip-music     { background: var(--c-earth);   color: var(--c-cream); height: 36px; }
.clip[aria-selected="true"] { outline: 2px solid var(--c-burnt-black); }
.playhead       { width: 2px; background: var(--c-burnt-black); }

/* ==========================================================================
   Effet VHS — à ajouter en classe sur le conteneur racine : <div class="vhs">
   Réglage global : --vhs-k (0 à 1). Les décors et textes sont altérés, jamais la mise en page.
   À désactiver pour les utilisateurs qui préfèrent moins de mouvement ou plus de netteté :
   retirer la classe .vhs ou fixer --vhs-k: 0.
   ========================================================================== */
.vhs {
  position: relative;
  filter:
    saturate(calc(1 + 0.25 * var(--vhs-k)))
    contrast(calc(1 + 0.08 * var(--vhs-k)))
    sepia(calc(0.2 * var(--vhs-k)))
    blur(calc(0.35px * var(--vhs-k)));
  text-shadow:
    calc(3px * var(--vhs-k)) 0 rgba(255, 0, 60, calc(0.15 + 0.5 * var(--vhs-k))),
    calc(-3px * var(--vhs-k)) 0 rgba(0, 170, 210, calc(0.15 + 0.5 * var(--vhs-k)));
}
.vhs::after {                       /* lignes de balayage + vignetage */
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 9999;
  background:
    radial-gradient(ellipse at center, rgba(60, 30, 10, 0) 55%, rgba(60, 30, 10, calc(0.35 * var(--vhs-k))) 100%),
    repeating-linear-gradient(0deg, rgba(20, 10, 5, calc(0.28 * var(--vhs-k))) 0 1px, rgba(20, 10, 5, 0) 1px 3px);
}
@media (prefers-reduced-motion: reduce) { .vhs { --vhs-k: 0.3; } }