/* Waribiz — WARIBIZ OS, le système de design du cockpit.
   « Comprendre. Décider. Progresser. »

   Ce fichier ne repeint pas toute l'application : il définit un **périmètre**,
   la classe `.gf-os`, portée par les écrans plein écran que nous maîtrisons
   (Mon espace, Mes signaux, Outils, Communauté). Les écrans du bundle React
   historique gardent leur apparence — leurs sources sont perdues, les repeindre
   demanderait de les réécrire.

   Le principe : à l'intérieur du périmètre, on **redéfinit les jetons existants**
   (--surface, --ink, --line…) plutôt que d'ajouter une couche de règles. Tout ce
   qui est déjà écrit avec ces jetons suit automatiquement, en clair comme en
   sombre — et un jeton oublié se voit immédiatement au lieu de se cacher derrière
   une valeur de repli.

   Le cockpit est sombre dans les deux thèmes, volontairement : c'est son
   identité, comme un terminal professionnel. Le reste de l'application continue
   de suivre le thème choisi.

   Sur la couleur : le vert lime dit la **progression**, jamais le gain. Achat et
   vente sont cyan et ambre — deux teintes neutres, séparées de 20,6 ΔE en vision
   protanope (mesuré, pas estimé). Gagné et perdu gardent vert et rouge, parce
   que là il s'agit bien d'un résultat. */

.gf-os {
  /* Fonds */
  --os-bg: #07111F;
  --surface: #0D1B2A;
  --surface-soft: #13283A;

  /* Encres */
  --ink: #F4F7FA;
  --ink-soft: #C6D4E0;
  --muted: #8EA5B8;
  --line: #1E3448;

  /* Accents — l'or de la marque cède la place au lime de progression */
  --os-accent: #B8F35A;
  --os-info: #49C6E5;
  --os-warn: #F5B942;
  --os-risk: #FF6B6B;
  --os-ok: #6FE7A1;
  --violet: var(--os-accent);
  --gold: var(--os-accent);
  /* Les variantes douces de la charte claire (crème, corail pâle) : sans elles,
     un onglet actif ou une pastille rapparaît en beige au milieu du cockpit. */
  --violet-soft: color-mix(in srgb, var(--os-accent) 16%, transparent);
  --violet-dark: var(--os-accent);
  --coral: var(--os-risk);
  --coral-soft: color-mix(in srgb, var(--os-risk) 16%, transparent);
  --mint: var(--os-ok);
  --mint-soft: color-mix(in srgb, var(--os-ok) 16%, transparent);
  --sky: var(--os-info);

  /* Rythme : un seul rayon et une seule échelle d'espacement pour tout l'écran */
  --os-r-sm: 10px;
  --os-r-md: 14px;
  --os-r-lg: 18px;

  /* Les chiffres s'alignent : pile monospace du système, aucun octet à télécharger
     sur une connexion limitée — c'est l'alignement qui compte, pas la fonte. */
  --os-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", Consolas, "Liberation Mono", monospace;

  color: var(--ink);
  background: var(--os-bg);
}

/* Le corps défilant partage le fond du cockpit : une carte doit se détacher du
   fond, pas l'inverse. */
.gf-os .gf-sg-body,
.gf-os .gf-ot-body { background: var(--os-bg) }
.gf-os .gf-sg-head,
.gf-os .gf-ot-head { background: var(--os-bg); border-bottom-color: var(--line) }

/* Tout ce qui porte un chiffre : tabulaire, sans exception. Un prix qui danse
   d'une ligne à l'autre est illisible en diagonale. */
.gf-os .gf-sg-price b,
.gf-os .gf-sg-quote b,
.gf-os .gf-ot-result b,
.gf-os .gf-ot-serie b,
.gf-os .gf-vip-offer b,
.gf-os .gf-sg-plan b,
.gf-os .gf-sg-rate b,
.gf-os .gf-sg-stat b {
  font-family: var(--os-mono); font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}

/* Sens d'un signal : cyan et ambre, jamais vert et rouge — un achat n'est pas
   « bien » et une vente n'est pas « mal ». */
.gf-os .gf-sg-item.is-buy { --sg-tone: var(--os-info) }
.gf-os .gf-sg-item.is-sell { --sg-tone: var(--os-warn) }

/* Résultat d'un trade : là, le vert et le rouge disent bien ce qu'ils disent. */
.gf-os .gf-sg-state.is-win,
.gf-os .gf-sg-stat.is-win b { color: var(--os-ok) }
.gf-os .gf-sg-state.is-loss,
.gf-os .gf-sg-stat.is-loss b { color: var(--os-risk) }
.gf-os .gf-sg-gap.is-up { color: var(--os-ok) }
.gf-os .gf-sg-gap.is-down { color: var(--os-risk) }

/* Boutons */
.gf-os .gf-sg-primary {
  background: var(--os-accent); color: #07111F; font-weight: 800; border-radius: var(--os-r-sm);
}
.gf-os .gf-sg-primary:disabled { opacity: .5 }
.gf-os .gf-sg-read,
.gf-os .gf-sg-take,
.gf-os .secondary-button {
  background: var(--surface-soft); color: var(--ink-soft);
  border: 1px solid var(--line); border-radius: var(--os-r-sm);
}
.gf-os .gf-sg-take.is-taken { background: color-mix(in srgb, var(--os-accent) 18%, transparent); color: var(--os-accent) }

/* Champs de saisie : le cockpit est sombre, les champs aussi. */
.gf-os .gf-input {
  background: var(--surface-soft); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--os-r-sm);
}
.gf-os .gf-input::placeholder { color: var(--muted) }
.gf-os .gf-input:focus-visible { outline: 2px solid var(--os-accent); outline-offset: 1px }

/* Badges de palier et de niveau */
.gf-os .gf-pg-badge { background: var(--surface-soft); color: var(--ink-soft) }
.gf-os .gf-pg-badge.is-intermediaire,
.gf-os .gf-pg-badge.is-pro { background: color-mix(in srgb, var(--os-info) 18%, transparent); color: var(--os-info) }
.gf-os .gf-pg-badge.is-elite { background: color-mix(in srgb, var(--os-accent) 20%, transparent); color: var(--os-accent) }

/* Barres de progression : le lime dit l'avancée, pas un gain. */
.gf-os .gf-pg-axis-head b { font-variant-numeric: tabular-nums }
.gf-os .gf-pg-bar { background: var(--surface-soft) }
.gf-os .gf-pg-bar > i { background: var(--os-accent) }
.gf-os .gf-pg-axis.is-done .gf-pg-bar > i { background: var(--os-ok) }
.gf-os .gf-pg-axis.is-done .gf-pg-axis-head b { color: var(--os-ok) }

/* Mises en garde : ambre pour ce qui mérite attention, corail pour le risque. */
.gf-os .gf-ot-warn {
  background: color-mix(in srgb, var(--os-warn) 14%, transparent);
  color: var(--os-warn); border: 1px solid color-mix(in srgb, var(--os-warn) 30%, transparent);
  border-radius: var(--os-r-md);
}
.gf-os .gf-sg-warn { color: var(--os-risk) }
.gf-os .gf-co-hidden { color: var(--os-warn) }

/* L'avertissement légal : lisible, jamais criard — il doit être lu, pas subi. */
.gf-os .gf-sg-disclaimer,
.gf-os .gf-ot-privacy { background: var(--surface); color: var(--muted); border: 1px solid var(--line) }

/* ------------------------------------------------------------------ *
 * Composants standard du cockpit
 * ------------------------------------------------------------------ */

/* Squelette de chargement : sur une connexion lente, montrer la forme de ce qui
   arrive vaut mieux qu'un mot « Chargement… » immobile. */
.gf-os-skeleton {
  border-radius: var(--os-r-sm); min-height: 14px;
  background: linear-gradient(90deg, var(--surface) 25%, var(--surface-soft) 37%, var(--surface) 63%);
  background-size: 400% 100%; animation: gf-os-shimmer 1.4s ease infinite;
}
@keyframes gf-os-shimmer { from { background-position: 100% 0 } to { background-position: 0 0 } }
@media (prefers-reduced-motion: reduce) {
  .gf-os-skeleton { animation: none }
}

/* Message d'état : information, attention, risque. Toujours un mot avec la
   couleur — la couleur seule ne dit rien à qui ne la distingue pas. */
.gf-os-alert {
  display: grid; gap: 4px; padding: 12px 14px; border-radius: var(--os-r-md);
  font-size: 13px; line-height: 1.55; border: 1px solid var(--line); background: var(--surface);
}
.gf-os-alert > strong { font-size: 12px; letter-spacing: .04em; text-transform: uppercase }
.gf-os-alert.is-info { border-color: color-mix(in srgb, var(--os-info) 35%, transparent) }
.gf-os-alert.is-info > strong { color: var(--os-info) }
.gf-os-alert.is-warn { border-color: color-mix(in srgb, var(--os-warn) 35%, transparent) }
.gf-os-alert.is-warn > strong { color: var(--os-warn) }
.gf-os-alert.is-risk { border-color: color-mix(in srgb, var(--os-risk) 35%, transparent) }
.gf-os-alert.is-risk > strong { color: var(--os-risk) }

/* Étiquette de statut, pour les listes. */
.gf-os-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px;
  border-radius: 999px; background: var(--surface-soft); color: var(--ink-soft);
  font-size: 11.5px; font-weight: 700; letter-spacing: .02em;
}
.gf-os-chip.is-info { color: var(--os-info) }
.gf-os-chip.is-warn { color: var(--os-warn) }
.gf-os-chip.is-risk { color: var(--os-risk) }
.gf-os-chip.is-ok { color: var(--os-ok) }