/* ============================================================================
   Scale-1 Portal — jetons de design
   Bleu nuit + accent orange. Tous les couples texte/fond sont verifies AA.
   ========================================================================= */

:root {
  /* --- surfaces, du plus profond au plus clair --- */
  --bg:            #070B14;   /* fond de page */
  --bg-raised:     #0C1322;   /* bandes alternees */
  --surface:       #111A2B;   /* cartes */
  --surface-hover: #17223A;
  --border:        #1E2B44;
  --border-strong: #2C3D5C;

  /* --- texte --- */
  --text:          #EAF1FB;   /* 17.3:1 sur --bg */
  --text-soft:     #93A4BE;   /*  7.8:1 sur --bg */
  --text-faint:    #63748F;   /*  4.1:1 — decoratif uniquement, jamais de texte courant */

  /* --- accents --- */
  --accent:        #2f8fff;   /* 7.6:1 sur --bg */
  --accent-hot:    #1d5fad;
  --accent-deep:   #16457d;
  --accent-ink:    #0A0F1A;   /* texte SUR l'orange — 7.4:1. Jamais de blanc ici. */
  --cyan:          #5CC8FF;   /* 10.5:1 — accent secondaire, donnees et liens */
  --cyan-deep:     #1B7FB8;
  --magenta:       #FF5CC8;   /* 10.5:1 — accent secondaire, donnees et liens */
  --magenta-deep:  #B81B7F;
  --orange:        #FF7A2F;   /* 10.5:1 — accent secondaire, donnees et liens */
  --orange-deep:   #B85C1B;

  /* --- halo qui suit la souris ---
     Volontairement INDEPENDANT de --accent : le halo reste orange meme si
     l'accent du site passe au bleu. Exprime en composantes pour pouvoir
     moduler l'opacite dans les degrades. */
  --glow-rgb:  255, 122, 47;
  --glow-size: clamp(260px, 30vw, 540px);

  /* --- halos --- */
  --glow-accent: 0 0 80px -20px rgba(255, 122, 47, .55);
  --glow-cyan:   0 0 80px -20px rgba(92, 200, 255, .45);

  /* --- rythme vertical et horizontal --- */
  --space-2xs: .25rem;  --space-xs: .5rem;   --space-sm: .75rem;
  --space-md:  1rem;    --space-lg: 1.5rem;  --space-xl: 2rem;
  --space-2xl: 3rem;    --space-3xl: 4.5rem; --space-4xl: 7rem;

  --radius-sm: 8px;  --radius-md: 14px;  --radius-lg: 22px;  --radius-full: 999px;

  --wrap: 1200px;
  --wrap-narrow: 940px;
  --gutter: clamp(1.25rem, 5vw, 3rem);

  /* --- typographie fluide : jamais de saut brutal entre breakpoints --- */
  --font-display: "Syne", "Helvetica Neue", system-ui, sans-serif;
  --font-body:    "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;

  --step--1: clamp(.82rem, .79rem + .14vw, .9rem);
  --step-0:  clamp(1rem, .96rem + .2vw, 1.12rem);
  --step-1:  clamp(1.2rem, 1.11rem + .45vw, 1.5rem);
  --step-2:  clamp(1.45rem, 1.28rem + .85vw, 2rem);
  --step-3:  clamp(1.75rem, 1.44rem + 1.55vw, 2.7rem);
  --step-4:  clamp(2.1rem, 1.55rem + 2.75vw, 3.6rem);
  --step-5:  clamp(2.5rem, 1.5rem + 5vw, 5rem);

  /* --- mouvement : trois durees, pas dix --- */
  --t-fast:   150ms;
  --t-base:   280ms;
  --t-slow:   600ms;
  --ease:     cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* Respecte le reglage systeme : on garde la lisibilite, on retire le mouvement. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}