/**
 * ============================================================
 * KREABOARD PUBLIC SITE — SCREEN TOKENS
 * ============================================================
 *
 * Rôle :
 * - déclarer les variables utilisées par le Screen Manager ;
 * - fournir des valeurs de secours avant l'initialisation JS ;
 * - ne modifier aucun composant visuel existant ;
 * - ne remplacer aucune media query actuelle.
 */

:root {
  /**
   * ----------------------------------------------------------
   * Dimensions réelles du viewport
   * ----------------------------------------------------------
   */

  --kb-public-viewport-width: 100vw;
  --kb-public-viewport-height: 100vh;
  --kb-public-viewport-ratio: 1;

  /**
   * ----------------------------------------------------------
   * Etat courant du Screen Manager
   * ----------------------------------------------------------
   */

  --kb-public-screen-type: desktop;
  --kb-public-height-type: medium;
  --kb-public-orientation: landscape;
  --kb-public-ratio-type: balanced;

  /**
   * ----------------------------------------------------------
   * Breakpoints documentaires
   * ----------------------------------------------------------
   *
   * Ces variables ne peuvent pas être utilisées directement
   * dans les conditions @media classiques.
   */

  --kb-public-breakpoint-compact-mobile: 430px;
  --kb-public-breakpoint-mobile: 560px;
  --kb-public-breakpoint-large-mobile: 640px;
  --kb-public-breakpoint-tablet: 760px;
  --kb-public-breakpoint-compact-desktop: 860px;
  --kb-public-breakpoint-laptop: 1180px;

  /**
   * ----------------------------------------------------------
   * Dimensions des conteneurs observés
   * ----------------------------------------------------------
   */

  --kb-public-container-width: 100%;
  --kb-public-container-height: auto;
}

/**
 * ============================================================
 * CONTENEURS OBSERVABLES
 * ============================================================
 *
 * Aucun style de structure n'est appliqué ici.
 * Les propriétés servent uniquement de valeurs de secours.
 */

[data-kb-public-container] {
  --kb-public-container-width: 100%;
  --kb-public-container-height: auto;
}