/* ==========================================================================
   BIYN SOLUTIONS : DESIGN TOKENS v2.0 "Une même vague"
   Charte graphique officielle du groupe, alignée sur biyn.solutions (2026)
   Couleurs extraites au pixel près du site de production.
   ========================================================================== */

:root {

  /* ---------- 1. COULEURS DE MARQUE ---------- */

  /* L'océan : la famille de fonds sombres (hero, CTA, footer) */
  --biyn-abyss:      #1D3139;   /* Le plus profond : footer, surfaces basses */
  --biyn-ocean-900:  #1C3945;   /* Fond sombre principal */
  --biyn-ocean-800:  #1D3B46;   /* Cartes sombres, encre des titres */
  --biyn-ocean-700:  #1B4551;   /* Milieu de gradient */
  --biyn-lagoon:     #184D55;   /* Le plus clair du gradient océan */

  /* L'encre : textes sur fond clair */
  --biyn-ink:        #1E3A46;   /* Titres et texte fort */
  --biyn-ink-soft:   #3D5A66;   /* Texte secondaire */
  --biyn-slate:      #587882;   /* Texte discret, paragraphes muted */

  /* La vague : les verts signature */
  --biyn-lime:       #CDF355;   /* Accent principal : CTA, actions clés */
  --biyn-lime-deep:  #A9D62F;   /* Hover / état actif du lime */
  --biyn-mint:       #61DAB4;   /* Départ du gradient signature (fond sombre) */
  --biyn-leaf:       #94DC72;   /* Milieu du gradient signature */
  --biyn-teal:       #1E9C8A;   /* Eyebrows, bordures d'icônes, liens sobres */
  --biyn-forest:     #2E9069;   /* Départ du gradient signature (fond clair) */
  --biyn-moss:       #89C532;   /* Fin du gradient signature (fond clair) */

  /* La brume : les fonds clairs */
  --biyn-mist:       #E6E9E6;   /* Fond de page clair (gris-vert brume) */
  --biyn-mist-deep:  #DCE0DE;   /* Vague de transition, séparateurs doux */
  --biyn-cloud:      #F4F6F4;   /* Surfaces intermédiaires */
  --biyn-paper:      #FBFCFB;   /* Cartes sur fond clair */
  --biyn-white:      #FFFFFF;

  /* ---------- 2. COULEURS DES ENTITÉS ---------- */

  --entity-bla:      #9866FF;   /* Biyn Learning Academy */
  --entity-hibou:    #F7B319;   /* Hibou, l'étude du soir */
  --entity-connect:  #438EFF;   /* Biyn Connect */
  --entity-studio:   #89C532;   /* Studio by Biyn Solutions */
  --entity-sight:    #16B4D7;   /* BiynSight */
  --entity-automate: #15A194;   /* Automatisation & IA */

  /* Variantes pastel pour fonds de badges (12 % d'opacité posée sur clair) */
  --entity-bla-soft:      rgba(152, 102, 255, .12);
  --entity-hibou-soft:    rgba(247, 179,  25, .14);
  --entity-connect-soft:  rgba( 67, 142, 255, .12);
  --entity-studio-soft:   rgba(137, 197,  50, .16);
  --entity-sight-soft:    rgba( 22, 180, 215, .12);
  --entity-automate-soft: rgba( 21, 161, 148, .12);

  /* ---------- 3. COULEURS SÉMANTIQUES ---------- */

  --ok:        #2E9069;
  --ok-soft:   rgba(46, 144, 105, .12);
  --warn:      #F7B319;
  --warn-soft: rgba(247, 179, 25, .14);
  --danger:    #E5484D;
  --danger-soft: rgba(229, 72, 77, .10);
  --info:      #438EFF;
  --info-soft: rgba(67, 142, 255, .10);

  /* ---------- 4. GRADIENTS SIGNATURE ---------- */

  /* Le fond océan (hero, cartes CTA, écrans d'accueil) */
  --grad-ocean: linear-gradient(112deg, #1D3641 0%, #1C3945 42%, #1B4551 72%, #184D55 100%);

  /* Le texte "vague" sur fond sombre (mint vers lime) */
  --grad-wave-dark: linear-gradient(93deg, #61DAB4 0%, #94DC72 48%, #CDF355 100%);

  /* Le texte "vague" sur fond clair (forest vers moss) */
  --grad-wave-light: linear-gradient(93deg, #2E9069 0%, #56A94C 52%, #89C532 100%);

  /* Halo lime discret (décor de cartes, hover) */
  --grad-lime-halo: radial-gradient(60% 80% at 80% 10%, rgba(205, 243, 85, .16), transparent 70%);

  /* ---------- 5. TYPOGRAPHIE ---------- */

  --font-display: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* Échelle typographique */
  --text-hero:    clamp(2.6rem, 5.2vw, 4.25rem);  /* H1 hero, weight 800 */
  --text-h1:      clamp(2.1rem, 3.6vw, 3rem);      /* H1 de page, weight 800 */
  --text-h2:      clamp(1.6rem, 2.6vw, 2.15rem);   /* H2 section, weight 800 */
  --text-h3:      1.35rem;                          /* H3 carte, weight 700 */
  --text-lead:    1.125rem;                         /* Chapô, weight 400 */
  --text-body:    1rem;
  --text-small:   .875rem;
  --text-caption: .75rem;                           /* Eyebrows, labels */

  --track-tight:  -0.02em;   /* Titres display */
  --track-wide:    0.14em;   /* Eyebrows majuscules */

  --leading-tight: 1.12;     /* Titres */
  --leading-body:  1.65;     /* Paragraphes */

  /* ---------- 6. RAYONS, OMBRES, ESPACEMENTS ---------- */

  --radius-pill:  999px;   /* Boutons, badges, tags */
  --radius-xl:    32px;    /* Grandes sections encadrées (bloc CTA) */
  --radius-lg:    24px;    /* Cartes principales */
  --radius-md:    16px;    /* Cartes internes, vignettes logo */
  --radius-sm:    10px;    /* Champs, petits éléments */

  --shadow-card:  0 6px 24px rgba(29, 49, 57, .07), 0 1px 3px rgba(29, 49, 57, .05);
  --shadow-hover: 0 14px 36px rgba(29, 49, 57, .12), 0 2px 6px rgba(29, 49, 57, .06);
  --shadow-lime:  0 8px 24px rgba(205, 243, 85, .35);
  --shadow-deep:  0 20px 60px rgba(13, 30, 36, .45);

  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
  --space-9: 96px;

  --container: 1200px;

  /* ---------- 7. MOUVEMENT ---------- */

  --ease-wave: cubic-bezier(.22, .68, .32, 1);
  --dur-fast:  160ms;
  --dur-base:  260ms;
  --dur-slow:  480ms;
}

/* ---------- 8. THÈMES APPLICATIFS ---------- */

/* Mode clair (défaut des interfaces : extranet, espace client) */
:root, [data-theme="light"] {
  --bg:            var(--biyn-mist);
  --surface:       var(--biyn-paper);
  --surface-2:     var(--biyn-cloud);
  --text:          var(--biyn-ink);
  --text-soft:     var(--biyn-ink-soft);
  --text-muted:    var(--biyn-slate);
  --border:        rgba(30, 58, 70, .10);
  --border-strong: rgba(30, 58, 70, .18);
  --grad-wave:     var(--grad-wave-light);
  --accent-text:   var(--biyn-forest);
}

/* Mode sombre (hero, écrans de connexion, dashboards nuit) */
[data-theme="dark"] {
  --bg:            var(--biyn-ocean-900);
  --surface:       rgba(255, 255, 255, .045);
  --surface-2:     rgba(255, 255, 255, .08);
  --text:          #EDF2F0;
  --text-soft:     #C4D2D2;
  --text-muted:    #8FA6AB;
  --border:        rgba(255, 255, 255, .10);
  --border-strong: rgba(255, 255, 255, .18);
  --grad-wave:     var(--grad-wave-dark);
  --accent-text:   var(--biyn-mint);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* ==========================================================================
   9. EXTENSIONS APPLICATIVES (espace client bs-espace-clients)
   Ajouts propres au produit, la charte au-dessus reste intouchée.
   ========================================================================== */

:root {
  --rail-width:     268px;   /* Rail de navigation océan */
  --rail-width-sm:  76px;    /* Rail replié (icônes seules) */
  --page-max:       1440px;  /* Largeur utile de la zone de travail */

  --z-rail:         120;
  --z-overlay:      110;
  --z-topbar:       100;
  --z-popover:      200;
}