/* ============================================================
   TALENTUM — Design Tokens
   Cinéma skin (default) + Studio skin stub (Phase 2)
   All component CSS reads from these variables exclusively.
   NO hardcoded hex values outside this file.
   ============================================================ */

/* Reset */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ---- Cinéma skin (default) ---- */
:root {
  /* Backgrounds */
  --color-bg-primary:    #0A0A0A;   /* deep black — dominant */
  --color-bg-secondary:  #141414;   /* slightly lifted black */
  --color-bg-light:      #F4F2EC;   /* warm off-white — loader, breather sections */

  /* Text */
  --color-text-primary:  #F4F2EC;   /* off-white — text on dark */
  --color-text-on-light: #0A0A0A;   /* black — text on off-white */
  --color-text-secondary:#9A9A9A;   /* mid-grey — captions, metadata (dark bg) */
  --color-text-secondary-light: #6B6B6B; /* mid-grey adapté au fond off-white (section light) */

  /* Accent — surgical restraint: Allura signature + image warm tones only */
  --color-accent-gold:       #C9A961;
  --color-accent-gold-light: #E3C77F;
  --color-accent-gold-glow:  rgba(201, 169, 97, 0.15); /* glow inset sur talent-card hover */
  --color-divider-gold-whisper: rgba(201, 169, 97, 0.15); /* border/divider whisper gold — footer, futurs séparateurs */
  --color-overlay-dark-soft:    rgba(10, 10, 10, 0.5);   /* halo semi-transparent — bouton mute, toggle showreel */

  /* Phase 7 — Toggle NR/BL : noir et blanc FIXES, jamais inversés par la peau (définis ici uniquement, pas dans le bloc studio) */
  --color-skin-noir:  #0A0A0A;
  --color-skin-blanc: #F4F2EC;

  /* Phase 3 — Focus ring */
  --color-focus-ring: var(--color-accent-gold-light); /* 2px gold-light sur :focus-visible — cohérence design system */

  /* Phase 3 — Form + ChoiceCard */
  --color-form-underline:         rgba(244, 242, 236, 0.3);  /* off-white 30% — underline repos */
  --color-error:                  #D97A7A;                   /* rouge chaud désaturé — lisible sur noir */
  --color-choice-card-border:     rgba(201, 169, 97, 0.25);  /* gold 25% — border card repos */
  --color-choice-card-hover-text: rgba(10, 10, 10, 0.75);    /* off-black 75% — description état actif */

  /* Typography */
  --font-display: 'Satoshi', 'Inter', sans-serif;
  --font-script:  'Allura', 'Pinyon Script', cursive;

  /* Type scale — clamp-based, mobile-first */
  --title-hero:    clamp(3rem, 8vw, 8rem);       /* Step 10.3 — desktop -20 % (était 10vw / 10rem), minimum mobile inchangé */
  --title-section: clamp(2.5rem, 6.4vw, 6.4rem); /* Step 10.3 — desktop -20 % (était 8vw / 8rem), minimum mobile inchangé */
  --title-sub:     clamp(1.5rem, 4vw, 4rem);
  --text-body:     clamp(0.9375rem, 1vw, 1.125rem);
  --text-small:    clamp(0.6875rem, 0.75vw, 0.8125rem);
  --text-eyebrow:  clamp(1.5rem, 2vw, 2.25rem);  /* eyebrows sections — +200% vs text-small */
  --text-script:   clamp(1.5rem, 3vw, 3rem);

  /* Spacing scale */
  --space-xs:  0.5rem;
  --space-sm:  1rem;
  --space-md:  2rem;
  --space-lg:  4rem;
  --space-xl:  6rem;
  --space-2xl: 8rem;
  --space-3xl: 12rem;

  /* Easing */
  --ease-expo-out:          cubic-bezier(0.16, 1, 0.3, 1);
  --ease-expo-in-out:       cubic-bezier(0.87, 0, 0.13, 1);
  --ease-cinematic:         cubic-bezier(0.77, 0, 0.175, 1);
  --ease-curtain-descent:   cubic-bezier(0.45, 0, 0.1, 1); /* démarre doucement, speed ramp léger */

  /* Durations */
  --duration-fast:    0.3s;
  --duration-normal:  0.6s;
  --duration-slow:    1s;
  --duration-slower:  1.4s;
  --duration-curtain: 1.2s;
}

/* ---- Mobile spacing scale — réduit les tokens grands pour éviter les espaces vides excessifs ---- */
@media (max-width: 767px) {
  :root {
    --space-3xl: 4rem;   /* was 12rem */
    --space-2xl: 3rem;   /* was 8rem  */
    --space-xl:  2rem;   /* was 6rem  */
  }
}

/* ---- Studio skin — Phase 6 (calibré, actif via toggle 6.1) ---- */
:root[data-skin="studio"] {
  --color-bg-primary:          #F4F2EC;              /* off-white — inversé de #0A0A0A */
  --color-bg-secondary:        #E8E6E0;              /* off-white légèrement assombri — miroir de #141414 */
  --color-bg-light:            #0A0A0A;              /* noir — inversé de #F4F2EC */
  --color-text-primary:        #0A0A0A;              /* noir — inversé de #F4F2EC */
  --color-text-on-light:       #F4F2EC;              /* off-white — inversé de #0A0A0A */
  --color-form-underline:      rgba(10, 10, 10, 0.3);        /* noir 30% — inversé de off-white 30% */
  --color-overlay-dark-soft:   rgba(244, 242, 236, 0.5);     /* off-white 50% — inversé de noir 50% */
}

/* ---- Global base styles ---- */
html {
  color-scheme: dark;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  overflow-y: scroll; /* force scrollbar dès le départ — évite le saut de layout au mount */
}

body {
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
  font-family: var(--font-display);
  font-weight: 400;
  overflow-x: clip; /* clip au lieu de hidden — ne crée pas de scroll container, permet au sticky et aux events scroll window de fonctionner */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Text selection */
::selection {
  background: var(--color-accent-gold);
  color: var(--color-bg-primary);
}