/* Les couleurs, les polices et les formes de MAXX, à un seul endroit.

   Extraites de app.css parce que les consoles s'en servent aussi. Deux fichiers qui
   déclareraient chacun leur bleu finissent toujours par en avoir deux légèrement
   différents, et personne ne sait alors lequel est le bon.
*/
:root {
  --bg: #f2f5fb;
  --paper: #ffffff;
  --raise: #e8eefc;
  --line: #d8e0f0;
  --line-strong: #c3cee6;

  --ink: #0c1b3d;
  --ink-soft: #4a5a7a;
  --muted: #7d8aa6;

  --accent: #1f4bdb;
  --accent-hover: #163cc0;
  --accent-wash: #e8eeff;

  --ok: #1f7a4d;
  --warn: #c4841d;
  --warn-wash: #fff4dc;
  --bad: #c0392b;
  --bad-wash: #fdecea;

  --gold: #1f4bdb;
  --metal: #b08d57;
  --night: #071433;
  --night-paper: #0c1d44;
  --cream: #f4f7ff;

  --radius: 4px;
  --radius-lg: 8px;
  --shadow: 0 1px 0 rgba(12, 27, 61, 0.04), 0 18px 40px rgba(12, 27, 61, 0.07);

  /* Le mouvement, nommé par son rôle et non par sa durée — l'idée de Motion UI. On
     règle le ressenti ici et toute l'interface change ensemble : « snap » répond au
     doigt, « ui » ouvre et ferme, « gentle » installe une grande surface. */
  --snap: 120ms cubic-bezier(0.2, 0, 0, 1);
  --ui: 220ms cubic-bezier(0.32, 0.72, 0, 1);
  --gentle: 420ms cubic-bezier(0.16, 1, 0.3, 1);

  /* La charte de l'app (mobile/src/ui/theme.ts) : charte-app.css la pose sur l'espace
     connecté et l'onboarding du site, en y renvoyant les jetons ci-dessus. */
  --app-fond: #ffffff;
  --app-releve: #f4f4f5;
  --app-ligne: rgba(0, 0, 0, 0.06);
  --app-ligne-forte: rgba(0, 0, 0, 0.12);
  --app-encre: #0d0d0d;
  --app-encre-douce: #3f3f46;
  --app-gris: #8e8e93;
  --app-noir: #000000;
  --app-ok: #1f8a4c;
  --app-ok-lavis: #e9f6ee;
  --app-attention: #b4731a;
  --app-attention-lavis: #fbf1e1;
  --app-mauvais: #c73f37;
  --app-mauvais-lavis: #fcebea;
  --app-metal: #a1a1aa;
  --app-creme: #fafafa;
  --app-nuit-papier: #1c1c1e;
  --app-rien: none;
  --app-rayon: 14px;
  --app-rayon-grand: 18px;

  --column: 860px;
  --serif: "Cormorant Garamond", "Times New Roman", Georgia, serif;
  --sans: "Outfit", ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", sans-serif;
}

/* Une préférence système qu'on respecte à la lettre : les fondus restent, les
   déplacements disparaissent. */
@media (prefers-reduced-motion: reduce) {
  :root { --snap: 0ms; --ui: 0ms; --gentle: 0ms; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* Le thème « chaud » : celui des consoles. Papier crème, encre presque noire, un seul
   bleu profond là où il faut agir. Les chiffres qui comptent passent en serif. C'est
   la même charte que le site, réchauffée : on la déclare ici et nulle part ailleurs. */
.chaud {
  --bg: #f6f4ef;
  --paper: #fffdf9;
  --raise: #efece5;
  --line: #e6e1d6;
  --line-strong: #d6cfbf;
  --ink: #16150f;
  --ink-soft: #55524a;
  --muted: #8d887c;
  --accent: #1d3fcf;
  --accent-hover: #1633ad;
  --accent-wash: #e9edfb;
  --ok: #1d6b45;
  --warn: #b8741a;
  --warn-wash: #fbf1df;
  --bad: #b2321f;
  --bad-wash: #fbebe7;
  --shadow: 0 1px 2px rgba(22, 21, 15, 0.04), 0 12px 32px -12px rgba(22, 21, 15, 0.10);
}

/* Ordinateur : le site (landing, application) passe au glacier lui aussi — la même
   lumière que le téléphone, les mêmes panneaux de verre. La console du fondateur porte
   la classe « glacier » sur <body> et suit la même charte, à toutes les largeurs. */
@media (min-width: 901px) {
  html.vitrine, html.app-accueil, html.dans-app, .glacier {
    --bg: #e9eef5;
    --paper: #ffffff;
    --raise: #f3f6fb;
    --line: rgba(20, 20, 22, 0.07);
    --line-strong: rgba(20, 20, 22, 0.16);
    --ink: #141416;
    --ink-soft: #3a3d44;
    --muted: #7a7f88;
    --accent: #2b7fe0;
    --accent-hover: #1f6fcc;
    --accent-wash: #e3eefb;
    --ok: #1f9a55;
    --bad: #d0483f;
    --gold: #2b7fe0;
    --metal: #a6abb4;
    --cream: #f6f9fd;
    --shadow: 0 1px 2px rgba(20, 30, 50, 0.05), 0 18px 44px -14px rgba(20, 30, 50, 0.18);
    --radius: 14px;
    --radius-lg: 22px;
    --noeud: url("/static/marque/noeud-noir.png");
    --cta-encre: #ffffff;
    --verre: linear-gradient(180deg, rgba(255, 255, 255, 0.66), rgba(255, 255, 255, 0.36));
    --verre-bord: rgba(255, 255, 255, 0.9);
    --verre-ombre: 0 30px 70px -40px rgba(20, 30, 50, 0.35), 0 2px 6px -4px rgba(20, 20, 22, 0.08), inset 0 1px 0 #fff, inset 0 -1px 0 rgba(255, 255, 255, 0.4);
    --verre2: rgba(255, 255, 255, 0.62);
    --glacier: radial-gradient(60% 45% at 18% 8%, rgba(255, 255, 255, 0.95), transparent 70%),
      radial-gradient(70% 55% at 85% 20%, #cfe0f7 0%, transparent 70%),
      radial-gradient(55% 45% at 20% 75%, #d6e8dc 0%, transparent 70%),
      radial-gradient(60% 50% at 80% 90%, #bfd4f0 0%, transparent 70%),
      linear-gradient(180deg, #f6f9fd, #e4ecf7 55%, #dbe6f3);
  }
}

/* Téléphone : trois ambiances au choix, posées sur <html data-theme="…">.
   Le nœud MAXX AI (planche officielle) reste le même ; seule la lumière change.
     aube   — papier ivoire, encre bleue, bronze, lueur d'aube (défaut)
     signal — Midnight, argent, bleu Signal réservé à l'action
     home   — les couleurs du site desktop (bleu-blanc), inchangées
   On choisit avec ?theme=aube|signal|home (mémorisé). */
@media (max-width: 900px) {
  :root {
    --radius: 14px;
    --radius-lg: 22px;

    /* extras téléphone, thème-dépendants */
    --hero-lueur: radial-gradient(circle, rgba(31, 75, 219, 0.14) 0%, rgba(31, 75, 219, 0.04) 42%, transparent 68%);
    --titre-em: var(--accent);
    --cta-encre: #ffffff;
    --dock-fond: rgba(255, 255, 255, 0.86);
    --dock-ligne: rgba(12, 27, 61, 0.10);
    --noeud: url("/static/marque/noeud-noir.png");
  }

  /* « aube », devenue glacier : un fond bleu clair avec un souffle de vert, des
     panneaux de verre blancs, l'encre presque noire, le gris pour le reste. Une seule
     couleur d'action, le bleu — celui des étapes qui avancent. */
  html[data-theme="aube"], .glacier {
    --bg: #e9eef5;
    --paper: #ffffff;
    --raise: #f3f6fb;
    --line: rgba(20, 20, 22, 0.07);
    --line-strong: rgba(20, 20, 22, 0.16);

    --ink: #141416;
    --ink-soft: #3a3d44;
    --muted: #7a7f88;

    --accent: #2b7fe0;
    --accent-hover: #1f6fcc;
    --accent-wash: #e3eefb;

    --ok: #1f9a55;
    --bad: #d0483f;

    --gold: #2b7fe0;
    --metal: #a6abb4;
    --cream: #f6f9fd;
    --shadow: 0 1px 2px rgba(20, 30, 50, 0.05), 0 18px 44px -14px rgba(20, 30, 50, 0.18);

    --hero-lueur: none;
    --titre-em: #7a7f88;
    --dock-fond: rgba(255, 255, 255, 0.55);
    --dock-ligne: rgba(255, 255, 255, 0.9);

    /* le verre */
    --verre: linear-gradient(180deg, rgba(255, 255, 255, 0.66), rgba(255, 255, 255, 0.36));
    --verre-bord: rgba(255, 255, 255, 0.9);
    --verre-ombre: 0 30px 70px -40px rgba(20, 30, 50, 0.35), 0 2px 6px -4px rgba(20, 20, 22, 0.08), inset 0 1px 0 #fff, inset 0 -1px 0 rgba(255, 255, 255, 0.4);
    --verre2: rgba(255, 255, 255, 0.62);

    /* le fond glacier : bleu clair, un souffle de vert, la lumière en haut à gauche */
    --glacier: radial-gradient(60% 45% at 18% 8%, rgba(255, 255, 255, 0.95), transparent 70%),
      radial-gradient(70% 55% at 85% 20%, #cfe0f7 0%, transparent 70%),
      radial-gradient(55% 45% at 20% 75%, #d6e8dc 0%, transparent 70%),
      radial-gradient(60% 50% at 80% 90%, #bfd4f0 0%, transparent 70%),
      linear-gradient(180deg, #f6f9fd, #e4ecf7 55%, #dbe6f3);
  }

  html[data-theme="signal"] {
    color-scheme: dark;
    --bg: #0b1433;
    --paper: #10204a;
    --raise: #172a5c;
    --line: rgba(143, 168, 255, 0.16);
    --line-strong: rgba(143, 168, 255, 0.30);

    --ink: #f2f5f8;
    --ink-soft: #c5cfe6;
    --muted: #8a97b8;

    --accent: #1f4bd8;
    --accent-hover: #3a63e6;
    --accent-wash: rgba(31, 75, 216, 0.18);

    --ok: #5dba87;
    --warn: #d4a24a;
    --warn-wash: rgba(212, 162, 74, 0.14);
    --bad: #e06a5c;
    --bad-wash: rgba(224, 106, 92, 0.14);

    --gold: #8fa8ff;
    --metal: #c8ccd6;
    --night: #070c1f;
    --night-paper: #10204a;
    --cream: #172a5c;
    --shadow: 0 18px 50px rgba(0, 0, 0, 0.45);

    --hero-lueur: radial-gradient(circle, rgba(31, 75, 216, 0.55) 0%, rgba(31, 75, 216, 0.16) 42%, transparent 70%);
    --titre-em: #8fa8ff;
    --dock-fond: rgba(16, 32, 74, 0.86);
    --dock-ligne: rgba(143, 168, 255, 0.20);
    --noeud: url("/static/marque/noeud-blanc.png");
  }
}

/* Téléphone : la vitrine (la landing) en blanc. Plus de fond glacier ni de verre
   laiteux : une page blanche, des surfaces d'un gris très clair et un trait fin
   (vitrine-pro.css en tire le reste). */
@media (max-width: 900px) {
  html.vitrine {
    --bg: #ffffff;
    --glacier: #ffffff;
    --raise: #f5f6f8;
    --verre: #ffffff;
    --verre2: #ffffff;
    --verre-bord: #eceef2;
    --verre-ombre: 0 1px 2px rgba(16, 24, 40, 0.04), 0 18px 44px -24px rgba(16, 24, 40, 0.22);
  }
}