/* ==========================================================================
   Design tokens — Blackskale Media
   Values derived from the reference layout system (dark canvas, violet accent).
   ========================================================================== */

:root {
  /* ---- Colour ---- */
  --c-bg:              #000000;
  --c-surface:         rgba(0, 0, 0, 0.24);
  --c-surface-2:       rgba(0, 0, 0, 0.25);
  --c-surface-3:       rgba(0, 0, 0, 0.55);
  --c-surface-solid:   #0a0a0c;

  --c-text:            #ffffff;
  --c-text-dim:        rgba(255, 255, 255, 0.72);
  --c-text-faint:      rgba(255, 255, 255, 0.48);
  --c-ink:             #000000;

  --c-accent:          #8c52ff;
  --c-accent-soft:     rgba(140, 82, 255, 0.56);
  --c-accent-glow:     rgba(140, 82, 255, 0.33);
  --c-accent-deep:     #533397;
  --c-accent-grad:     linear-gradient(180deg, #7834ff 0%, #5c0aff 100%);
  --c-magenta:         #ff3aff;

  --c-line:            #3e3b43;
  --c-line-soft:       rgba(255, 255, 255, 0.2);
  --c-line-strong:     rgba(255, 255, 255, 0.3);
  --c-line-faint:      rgba(255, 255, 255, 0.12);
  --c-divider:         rgba(255, 255, 255, 0.24);

  /* ---- Type families ---- */
  --f-display: "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --f-body:    "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --f-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --f-grotesk: "Space Grotesk", "Inter Tight", Helvetica, Arial, sans-serif;

  /* ---- Type scale (desktop) ---- */
  --t-hero:        70px;   --t-hero-lh:        65px;
  --t-section:     48px;   --t-section-lh:     60px;
  --t-lead:        28px;   --t-lead-lh:        35px;
  --t-card-title:  28px;   --t-card-title-lh:  28px;
  --t-stat-title:  36px;   --t-stat-title-lh:  45px;
  --t-stat-num:    80px;   --t-stat-num-lh:    68px;
  --t-body:        18px;   --t-body-lh:        22.5px;
  --t-body-lg:     20px;   --t-body-lg-lh:     29px;
  --t-eyebrow:     16px;   --t-eyebrow-lh:     19.2px;
  --t-small:       14px;   --t-small-lh:       20px;

  --ls-tight:      -1px;
  --ls-eyebrow:    3.2px;
  /* 2.5px au lieu de 4px : l'unité française (« de chances ») est plus longue
     que l'anglaise et saturait exactement la colonne de 160px. */
  --ls-unit:       2.5px;

  /* ---- Layout ---- */
  --container:        1388px;
  --container-narrow: 1300px;
  --gutter:           14px;

  /* ---- Rhythm ---- */
  --sp-section:    120px;
  --sp-section-sm: 72px;
  --sp-section-xs: 36px;
  --sp-block:      55px;
  --sp-card:       32px;

  /* ---- Radii ---- */
  --r-sm:   4px;
  --r-card: 6px;
  --r-md:   8px;
  --r-lg:   16px;
  --r-pill: 1000px;

  /* ---- Motion ---- */
  --ease:        cubic-bezier(0.22, 1, 0.36, 1);
  --ease-inout:  cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:    180ms;
  --dur:         320ms;
  --dur-slow:    720ms;

  /* ---- Elevation ---- */
  --shadow-card: 0 24px 64px -32px rgba(140, 82, 255, 0.45);
  --shadow-lift: 0 32px 80px -40px rgba(140, 82, 255, 0.65);
}

/* Laptop */
@media (max-width: 1279px) {
  :root {
    --t-hero: 60px;      --t-hero-lh: 58px;
    --t-section: 42px;   --t-section-lh: 52px;
    --t-stat-num: 68px;  --t-stat-num-lh: 60px;
    --t-stat-title: 30px;--t-stat-title-lh: 38px;
    --sp-section: 96px;
  }
}

/* Tablet */
@media (max-width: 991px) {
  :root {
    --t-hero: 48px;      --t-hero-lh: 48px;
    --t-section: 36px;   --t-section-lh: 44px;
    --t-lead: 22px;      --t-lead-lh: 30px;
    --t-card-title: 24px;--t-card-title-lh: 26px;
    --t-stat-num: 60px;  --t-stat-num-lh: 54px;
    --t-stat-title: 26px;--t-stat-title-lh: 33px;
    --sp-section: 80px;
    --sp-section-sm: 56px;
    --gutter: 20px;
  }
}

/* Mobile */
@media (max-width: 767px) {
  :root {
    --t-hero: 38px;      --t-hero-lh: 40px;
    --t-section: 30px;   --t-section-lh: 36px;
    --t-lead: 18px;      --t-lead-lh: 26px;
    --t-card-title: 22px;--t-card-title-lh: 24px;
    --t-stat-num: 52px;  --t-stat-num-lh: 48px;
    --t-stat-title: 22px;--t-stat-title-lh: 28px;
    --t-body: 16px;      --t-body-lh: 21px;
    --t-body-lg: 17px;   --t-body-lg-lh: 25px;
    --t-eyebrow: 13px;
    --ls-eyebrow: 2.4px;
    --sp-section: 64px;
    --sp-section-sm: 44px;
    --sp-block: 36px;
    --gutter: 18px;
  }
}