/*
 * BoostEcom × Documentation.AI
 * ----------------------------
 * Source de vérité : l'app BoostEcom (`src/styles/tokens.css`,
 * `src/styles/theme.css`, `src/app/layout.tsx`,
 * `src/components/ui/button/button-class.ts`). Voir README, « Identité
 * visuelle ». Rien n'est redessiné ici : chaque valeur est la conversion
 * hexadécimale d'un jeton oklch de l'app, et son nom d'origine est noté à
 * côté. Le template natif reste la base ; ce fichier n'ajoute que les jetons
 * et accents BoostEcom, ciblés et réversibles.
 *
 * Le produit est sombre uniquement (`<html class="dark">`, jamais basculé) :
 * le thème sombre est le thème par défaut (scripts/boostecom-theme-default.mjs).
 * Les valeurs claires viennent de `LIGHT_SCOPE`
 * (`src/components/shells/layout/light-scope.ts`), la seule surface claire
 * réelle de l'app (accueil et pages marketing).
 */
@import url("https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500&display=swap");

/* Jetons BoostEcom (valeurs de l'app). */
:root {
  --boostecom-accent: #0070f3;          /* --boostecom-blue-700, oklch(57.3% 0.2146 258.2) */
  --boostecom-accent-strong: #0160d1;   /* --boostecom-blue-800, oklch(51.3% 0.191 258.2) */
  --boostecom-accent-soft: #52a9ff;     /* --boostecom-blue-900, oklch(71.9% 0.1515 250.7) */
  --boostecom-primary-bg: #ededed;      /* --boostecom-gray-1000, fond du bouton primary */
  --boostecom-primary-bg-hover: #a0a0a0;/* --boostecom-gray-900, survol du bouton primary */
  --boostecom-on-primary: #000;         /* --boostecom-on-primary, oklch(0% 0 0) */
  --boostecom-border: rgb(255 255 255 / 0.145); /* --boostecom-alpha-400 = --border (.dark) */
  --boostecom-radius: 0.35rem;          /* --radius : toute l'échelle s'y replie (theme.css) */
  --boostecom-panel-radius: 0.625rem;   /* --panel-radius : panneaux flottants */
  --boostecom-ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* --motion-ease-standard */
  --boostecom-instant: 120ms;           /* --motion-instant */
  --boostecom-font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --boostecom-font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --brand: #0070f3;
  --brand-text: #ffffff;
}

.dark {
  --brand: #0070f3;
  --brand-text: #ffffff;
  --navbar-bg: #000;                    /* --background (.dark), oklch(0% 0 0) */
  --sidebar-bg: #000;
  --content-bg: #000;
  --footer-border: var(--boostecom-border);
  --toc-text: #a1a1a1;                  /* --muted-foreground (.dark), oklch(0.708 0 0) */
  --toc-active-text: #52a9ff;           /* --boostecom-blue-900 */
}

body {
  font-family: var(--boostecom-font-sans);
}

code, kbd, pre, samp {
  font-family: var(--boostecom-font-mono);
}

/* Bouton « Ouvrir BoostEcom » : le bouton `primary` de l'app
   (button-class.ts), en CSS. Fond gris-1000, texte noir, bordure
   transparente, rayon unique 0,35 rem, Geist 14 px semi-gras, hauteur
   28 px (h-7) ; survol gris-900. Pas d'animation : l'app n'en met pas
   sur ce bouton. */
.dai-navbar-buttons a:not(.dai-theme-toggle),
.dai-navbar-actions-mobile a {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: var(--boostecom-radius);
  background: var(--boostecom-primary-bg) !important;
  color: var(--boostecom-on-primary) !important;
  font-family: var(--boostecom-font-sans);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color var(--boostecom-instant) var(--boostecom-ease-standard);
}

.dai-navbar-buttons a:not(.dai-theme-toggle) svg,
.dai-navbar-actions-mobile a svg {
  color: var(--boostecom-on-primary) !important;
}

.dai-navbar-buttons a:not(.dai-theme-toggle):hover,
.dai-navbar-actions-mobile a:hover {
  background: var(--boostecom-primary-bg-hover) !important;
}

@media (prefers-reduced-motion: reduce) {
  .dai-navbar-buttons a:not(.dai-theme-toggle),
  .dai-navbar-actions-mobile a {
    transition: none;
  }
}

/* En-têtes de tableaux : noirs avec la bordure de l'app, en clair comme en sombre. */
.dai-article table thead th {
  background: #000 !important;
  color: #fafafa !important;            /* --foreground (.dark) */
  border-color: var(--boostecom-border) !important;
  font-weight: 600;
}

/* En sombre, les grandes surfaces grises du template deviennent le noir pur
   de l'app (--background et --card valent oklch(0% 0 0)). */
.dark body,
.dark .dai-layout,
.dark .dai-content-area,
.dark .dai-content-column,
.dark .dai-page,
.dark .dai-page-main,
.dark .dai-article,
.dark .dai-page-aside,
.dark .dai-navbar,
.dark .dai-sidebar,
.dark .dai-sidebar-content,
.dark .dai-sticky-header,
.dark .dai-navbar-tabs {
  background-color: #000 !important;
}

/* Carte « Suivant / Précédent » : noir, bordure alpha-400, rayon des panneaux. */
.dark .dai-page-nav a {
  background-color: #000 !important;
  border: 1px solid var(--boostecom-border);
  border-radius: var(--boostecom-panel-radius);
  padding: 12px 16px;
}