/* OG Serveur — les jetons de design, copiés tels quels d’OG Business (SAAS/og-business/public/css/tokens.css). Toute couleur, tout rayon, toute durée vient d'ici.
   Direction « Givre » (Théo, 12/10/2026 : « la même DA que mon app OG Bank, même glass style Apple, même background,
   clair ou foncé comme on veut ») : verre dépoli, fond presque noir avec trois halos, tout en gris, un seul bleu.
   Les valeurs sont celles d'OG Bank (SAAS/og-bank/public/css/tokens.css) ; les NOMS sont restés ceux d'OG Business,
   pour que les feuilles de page n'aient pas à changer :
     --gold-*      → l'accent (le bleu) : ce qui compte, le lien, la sélection ;
     --gold-fill-* → l'aplat de l'action principale et de l'onglet actif : « encre » (clair sur sombre, sombre sur clair) ;
     --wine-*      → l'accent lui aussi (l'élément actif).
   Deux thèmes : le SOMBRE est le thème par défaut (<html data-theme="dark">), le clair s'active avec data-theme="light".
   Les valeurs de :root sont celles du clair ; l'attribut est toujours posé (index.html, puis ui.js).
   Règle pour les feuilles de page : jamais de blanc, de noir ni de bleu écrits en dur.
     voile        → rgba(var(--overlay), 0.06)
     ombre        → rgb(var(--shade) / calc(0.4 * var(--shade-k)))
     accent       → rgba(var(--gold-rgb), 0.2)
     teinte texte → color-mix(in srgb, <couleur> var(--tint), var(--mix)) */
:root {
  color-scheme: light;

  /* Surfaces */
  --bg: #eef0f3;
  --bg-raised: #f5f6f8;
  --surface: #ffffff;
  --surface-2: #e9ebef;
  --surface-3: #dcdfe5;
  --line: rgba(11, 12, 16, 0.07);
  --line-strong: rgba(11, 12, 16, 0.14);
  --sidebar-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.62));
  --backdrop: rgba(11, 12, 16, 0.38);

  /* Texte */
  --text: #0b0c10;
  --text-2: #3a3c44;
  --muted: #62646e;

  /* L'accent (un seul bleu). --gold-bright sert au TEXTE et aux accents : en clair, un bleu foncé, lisible sur papier. */
  --gold: #2f54eb;
  --gold-bright: #2340c8;
  --gold-deep: #1c339f;
  --gold-rgb: 47, 84, 235;
  --gold-bright-rgb: 35, 64, 200;
  --gold-soft: rgba(47, 84, 235, 0.10);
  --gold-line: rgba(47, 84, 235, 0.32);
  /* Les aplats (bouton principal, onglet actif) : l'encre. */
  --gold-fill-from: #16181d;
  --gold-fill-to: #0b0c10;
  --gold-fill-hover: #2a2c33;
  --on-gold: #ffffff;

  /* L'élément actif : l'accent aussi. */
  --wine: #2f54eb;
  --wine-deep: #1c339f;
  --wine-rgb: 47, 84, 235;
  --wine-soft: rgba(47, 84, 235, 0.10);
  --cream: #ffffff;

  /* Mélanges */
  --overlay: 11, 12, 16;      /* voile : sombre sur papier clair */
  --shade: 14 18 32;          /* ombres, froides */
  --shade-k: 0.4;             /* les ombres sont plus légères en clair */
  --mix: black;
  --tint: 62%;
  --star-rgb: 47, 84, 235;

  /* États */
  --ok: #0f7a43;
  --ok-soft: rgba(15, 122, 67, 0.12);
  --warn: #a8640a;
  --warn-soft: rgba(168, 100, 10, 0.12);
  --danger: #b4362b;
  --danger-soft: rgba(180, 54, 43, 0.11);
  --info: #2f54eb;
  --info-soft: rgba(47, 84, 235, 0.10);

  /* Statuts des business */
  --st-scaling: #0f7a43;
  --st-lancement: #a8640a;
  --st-developpement: #2f54eb;
  --st-pause: #2f54eb;            /* en pause = bleu (Théo, 02/10) */

  /* Typographie : une seule famille, celle d'OG Bank (Geist si elle est là, sinon la police du système : SF sur Apple). */
  --font: 'Geist', -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, 'Segoe UI', Roboto, sans-serif;
  --font-varsity: var(--font);
  --font-display: var(--font);
  --font-accent: var(--font);
  --font-body: var(--font);
  --fs-xs: 0.72rem;
  --fs-sm: 0.82rem;
  --fs-md: 0.94rem;
  --fs-lg: 1.12rem;
  --fs-xl: 1.5rem;
  --fs-2xl: 2.1rem;
  --fs-3xl: clamp(1.9rem, 3.6vw, 2.5rem);

  /* Espacements */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 72px;

  /* Rayons et ombres */
  --r-sm: 10px; --r-md: 16px; --r-lg: 22px; --r-xl: 28px; --r-pill: 999px;
  --shadow-1: 0 0 0 0.5px rgba(14, 18, 32, 0.07), 0 10px 28px -12px rgba(14, 18, 32, 0.18);
  --shadow-2: 0 0 0 0.5px rgba(14, 18, 32, 0.08), 0 28px 70px -20px rgba(14, 18, 32, 0.34);
  --glow-gold: 0 0 0 1px var(--gold-line), 0 14px 40px -14px rgba(47, 84, 235, 0.35);

  /* Mouvement */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-fast: 140ms;
  --t-med: 280ms;
  --t-slow: 620ms;

  /* Le verre dépoli d'OG Bank : un voile translucide, flouté et saturé, un filet de lumière en haut.
     Recette : background: var(--glass-bg); backdrop-filter: var(--glass-filter);
               box-shadow: var(--glass-inset), var(--glass-shadow); + un ::before en var(--glass-sheen). */
  --glass-bg: rgba(255, 255, 255, 0.72);
  --glass-bg-strong: rgba(255, 255, 255, 0.90);
  --glass-bg-soft: rgba(255, 255, 255, 0.48);
  --glass-tint-wine: rgba(47, 84, 235, 0.07);
  --glass-tint-gold: rgba(47, 84, 235, 0.07);
  --glass-blur: 26px;
  --glass-filter: blur(var(--glass-blur)) saturate(170%);
  --glass-filter-soft: blur(16px) saturate(150%);
  --glass-edge: #ffffff;
  --glass-edge-low: rgba(255, 255, 255, 0);
  --glass-border: rgba(255, 255, 255, 0.95);
  --glass-line: rgba(14, 18, 32, 0.07);
  --glass-inset: inset 0 1px 0 var(--glass-edge);
  --glass-shadow: 0 0 0 0.5px var(--glass-line), 0 10px 28px -12px rgba(14, 18, 32, 0.18);
  --glass-sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 46%);
  --glass-caustic: linear-gradient(transparent, transparent);
  --glass-shadow-sm: 0 0 0 0.5px var(--glass-line), 0 6px 16px -8px rgba(14, 18, 32, 0.16);
  --glass-shadow-lift: 0 0 0 0.5px var(--glass-line), 0 24px 60px -20px rgba(14, 18, 32, 0.30);
  /* Les commandes posées sur le verre (boutons, champs) : le voile d'OG Bank, sans flou à elles. */
  --glass-control: rgba(11, 12, 16, 0.06);
  --glass-control-hover: rgba(11, 12, 16, 0.10);
  --glass-field: rgba(255, 255, 255, 0.75);
  --glass-field-hover: rgba(255, 255, 255, 0.92);
  /* Le reflet des aplats pleins (bouton principal, onglet actif) : presque rien, l'encre reste nette. */
  --fill-sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0) 60%);
  --fill-edge: rgba(255, 255, 255, 0.10);
  /* Le décor derrière le verre : les trois halos d'OG Bank (bleu en haut à droite, corail à gauche, vert d'eau à droite). */
  --amb: radial-gradient(340px 260px at 92% 4%, rgba(130, 150, 255, 0.30), transparent 70%),
         radial-gradient(300px 240px at -6% 22%, rgba(255, 190, 160, 0.26), transparent 70%),
         radial-gradient(360px 300px at 104% 48%, rgba(150, 215, 205, 0.22), transparent 70%);
  --ambient-1: rgba(130, 150, 255, 0.30);
  --ambient-2: rgba(255, 190, 160, 0.26);
  --ambient-3: rgba(150, 215, 205, 0.22);
  --ambient-trame: transparent;
  /* La tuile « OG » et les pastilles à initiales. */
  --mono-bg: linear-gradient(160deg, #ffffff, #e2e4ea);
  --mono-line: #ffffff;

  /* Gabarit */
  --sidebar-w: 116px;         /* la barre de 96 px d'OG Bank et sa marge de 20 px */
  --tabbar-h: 64px;
  --content-max: 1480px;
}

:root[data-theme='dark'] {
  color-scheme: dark;
  --bg: #08090c;
  --bg-raised: #0e0f13;
  --surface: #15161b;
  --surface-2: #1c1d23;
  --surface-3: #26272f;
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.16);
  --sidebar-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.035));
  --backdrop: rgba(4, 5, 8, 0.66);

  --text: #f3f4f6;
  --text-2: #d5d7dd;
  --muted: #9c9ea8;

  --gold: #6e86ff;
  --gold-bright: #aebcff;
  --gold-deep: #4a5fd6;
  --gold-rgb: 110, 134, 255;
  --gold-bright-rgb: 174, 188, 255;
  --gold-soft: rgba(110, 134, 255, 0.18);
  --gold-line: rgba(110, 134, 255, 0.40);
  --gold-fill-from: #ffffff;
  --gold-fill-to: #e9ebf0;
  --gold-fill-hover: #ffffff;
  --on-gold: #08090c;

  --wine: #6e86ff;
  --wine-deep: #4a5fd6;
  --wine-rgb: 110, 134, 255;
  --wine-soft: rgba(110, 134, 255, 0.18);
  --cream: #f3f4f6;

  --overlay: 255, 255, 255;
  --shade: 0 0 0;
  --shade-k: 1;
  --mix: white;
  --tint: 78%;
  --star-rgb: 243, 244, 246;

  --ok: #3dd68c;
  --ok-soft: rgba(61, 214, 140, 0.14);
  --warn: #f0b24a;
  --warn-soft: rgba(240, 178, 74, 0.14);
  --danger: #ff7a6b;
  --danger-soft: rgba(255, 122, 107, 0.14);
  --info: #6e86ff;
  --info-soft: rgba(110, 134, 255, 0.16);

  --st-scaling: #3dd68c;
  --st-lancement: #f0b24a;
  --st-developpement: #6e86ff;
  --st-pause: #6e86ff;

  --shadow-1: 0 14px 34px -14px rgba(0, 0, 0, 0.7);
  --shadow-2: 0 30px 80px -24px rgba(0, 0, 0, 0.85);
  --glow-gold: 0 0 0 1px var(--gold-line), 0 12px 40px -14px rgba(110, 134, 255, 0.45);

  --glass-bg: rgba(255, 255, 255, 0.065);
  --glass-bg-strong: rgba(24, 25, 31, 0.82);
  --glass-bg-soft: rgba(255, 255, 255, 0.035);
  --glass-tint-wine: rgba(110, 134, 255, 0.12);
  --glass-tint-gold: rgba(110, 134, 255, 0.12);
  --glass-edge: rgba(255, 255, 255, 0.14);
  --glass-edge-low: rgba(255, 255, 255, 0);
  --glass-border: rgba(255, 255, 255, 0.09);
  --glass-line: rgba(0, 0, 0, 0);
  --glass-shadow: 0 14px 34px -14px rgba(0, 0, 0, 0.7);
  --glass-sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0) 46%);
  --glass-shadow-sm: 0 8px 20px -10px rgba(0, 0, 0, 0.6);
  --glass-shadow-lift: 0 26px 64px -18px rgba(0, 0, 0, 0.85);
  --glass-control: rgba(255, 255, 255, 0.08);
  --glass-control-hover: rgba(255, 255, 255, 0.14);
  --glass-field: rgba(255, 255, 255, 0.07);
  --glass-field-hover: rgba(255, 255, 255, 0.10);
  --fill-sheen: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0));
  --fill-edge: rgba(255, 255, 255, 0);
  --amb: radial-gradient(340px 260px at 92% 4%, rgba(90, 110, 255, 0.30), transparent 70%),
         radial-gradient(300px 240px at -6% 22%, rgba(255, 140, 110, 0.14), transparent 70%),
         radial-gradient(360px 300px at 104% 48%, rgba(80, 200, 180, 0.13), transparent 70%);
  --ambient-1: rgba(90, 110, 255, 0.30);
  --ambient-2: rgba(255, 140, 110, 0.14);
  --ambient-3: rgba(80, 200, 180, 0.13);
  --mono-bg: linear-gradient(160deg, #2a2c33, #16171b);
  --mono-line: rgba(255, 255, 255, 0.10);
}

/* Transparence réduite (réglage d'accessibilité) : le verre devient presque opaque. */
@media (prefers-reduced-transparency: reduce) {
  :root, :root[data-theme='dark'] {
    --glass-bg: var(--surface); --glass-bg-strong: var(--surface); --glass-bg-soft: var(--surface);
    --glass-filter: none; --glass-filter-soft: none;
    --glass-control: var(--surface-2); --glass-control-hover: var(--surface-3);
    --glass-field: var(--bg-raised); --glass-field-hover: var(--bg-raised);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 1ms; --t-med: 1ms; --t-slow: 1ms; }
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
}