/* NBA Academy — les jetons de design, copiés de l'App NBA (NBApp/public/css/tokens.css) le 03/10/2026 pour que les deux apps
   soient de la même famille. Ajouts Academy : --sky, --sun (pastilles de statut) ; --sidebar-w passe à 248 px.
   Jetons d'origine : Toute couleur, tout rayon, toute durée vient d'ici.
   Direction : la planche de marque « Oxblood Fraternity » (production/transition-navire-solide-nba/assets/da/) —
   charcoal #100D0E · deep oxblood #651D2B · dark wine #2A0D13 · warm cream #EFE3CF · antique gold #B49558,
   et les polices des kits motion (Alfa Slab One, Roboto Slab, Figtree). Clair : crème, oxblood pour l'action,
   or pour ce qui compte. Sombre : charcoal et vin, or, crème.
   Deux thèmes : le CLAIR est le thème par défaut, le sombre s'active avec <html data-theme="dark">.
   Règle pour les feuilles de page : jamais de blanc, de noir ni d'or écrits en dur.
     voile        → rgba(var(--overlay), 0.06)
     ombre        → rgb(var(--shade) / calc(0.4 * var(--shade-k)))
     or           → rgba(var(--gold-rgb), 0.2)
     teinte texte → color-mix(in srgb, <couleur> var(--tint), var(--mix)) */
:root {
  color-scheme: light;

  /* Surfaces */
  --bg: #efe3cf;
  --bg-raised: #f6eede;
  --surface: #fcf8f0;
  --surface-2: #f1e6cf;
  --surface-3: #e4d5b8;
  --line: rgba(42, 13, 19, 0.11);
  --line-strong: rgba(42, 13, 19, 0.22);
  --sidebar-bg: linear-gradient(180deg, rgba(252, 248, 240, 0.9), rgba(241, 230, 207, 0.9));
  --backdrop: rgba(42, 13, 19, 0.45);

  /* Texte */
  --text: #1b0f12;
  --text-2: #4e3a3c;
  --muted: #6c5853;           /* un cran plus dense qu'avant (#7a6660) : le décor ambiant et le verre ne doivent rien coûter en contraste */

  /* Or NBA. --gold-bright sert au TEXTE et aux accents : en clair, c'est un or foncé, lisible sur papier. */
  --gold: #a8853f;
  --gold-bright: #8a6a2f;
  --gold-deep: #6d5222;
  --gold-rgb: 168, 133, 63;
  --gold-bright-rgb: 138, 106, 47;
  --gold-soft: rgba(168, 133, 63, 0.15);
  --gold-line: rgba(168, 133, 63, 0.48);
  /* Les aplats dorés (bouton principal, onglet actif) gardent l'or vif dans les deux thèmes. */
  --gold-fill-from: #7a2535;
  --gold-fill-to: #651d2b;
  --gold-fill-hover: #8c2c3e;
  --on-gold: #efe3cf;

  /* Bordeaux de la marque — l’action principale, l’élément actif */
  --wine: #651d2b;
  --wine-deep: #2a0d13;
  --wine-rgb: 101, 29, 43;
  --wine-soft: rgba(101, 29, 43, 0.10);
  --cream: #efe3cf;

  /* Mélanges */
  --overlay: 42, 13, 19;      /* voile : sombre sur papier clair */
  --shade: 42 13 19;          /* ombres, teintées chaud */
  --shade-k: 0.32;            /* les ombres sont plus légères en clair */
  --mix: black;
  --tint: 58%;
  --star-rgb: 101, 29, 43;

  /* États */
  --ok: #1d9a58;
  --ok-soft: rgba(29, 154, 88, 0.13);
  --warn: #b8700a;
  --warn-soft: rgba(184, 112, 10, 0.13);
  --danger: #d23a58;
  --danger-soft: rgba(210, 58, 88, 0.12);
  --info: #2d6cdf;
  --info-soft: rgba(45, 108, 223, 0.12);

  /* Statuts des business */
  --st-scaling: #1d9a58;
  --st-lancement: #a8853f;
  --st-developpement: #2d6cdf;
  --st-pause: #2d6cdf;            /* en pause = bleu (Théo, 02/10) */

  /* Typographie */
  --font-varsity: 'Alfa Slab One', 'Rockwell', Georgia, serif;         /* le lettrage varsity — la police des kits motion */
  --font-display: 'Archivo', 'Inter', system-ui, sans-serif;          /* titres et grands chiffres */
  --font-accent: 'Roboto Slab', 'Rockwell', Georgia, serif;             /* sur-titres, étiquettes — comme les kits motion */
  --font-body: 'Figtree', 'Inter', system-ui, -apple-system, sans-serif;      /* le texte courant — comme les kits motion */

  --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(2.4rem, 5vw, 3.6rem);

  /* 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: 26px; --r-xl: 34px; --r-pill: 999px;   /* un peu plus généreux, façon iOS */
  --shadow-1: 0 1px 2px rgba(42, 13, 19, 0.06), 0 10px 28px rgba(42, 13, 19, 0.08);
  --shadow-2: 0 2px 6px rgba(42, 13, 19, 0.08), 0 28px 70px rgba(42, 13, 19, 0.24);
  --glow-gold: 0 0 0 1px var(--gold-line), 0 14px 40px rgba(168, 133, 63, 0.22);

  /* 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;


  /* Verre « liquid glass » façon Apple : un voile translucide, flouté et saturé, bordé de lumière.
     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, 252, 246, 0.22);
  --glass-bg-strong: rgba(255, 252, 246, 0.46);
  --glass-bg-soft: rgba(255, 252, 246, 0.12);
  --glass-tint-wine: rgba(101, 29, 43, 0.10);
  --glass-tint-gold: rgba(180, 149, 88, 0.14);
  --glass-blur: 34px;
  --glass-filter: blur(var(--glass-blur)) saturate(190%) brightness(1.04);
  --glass-filter-soft: blur(18px) saturate(170%);
  --glass-edge: rgba(255, 255, 255, 0.95);
  --glass-edge-low: rgba(255, 255, 255, 0.38);
  --glass-border: rgba(255, 255, 255, 0.42);
  --glass-line: rgba(42, 13, 19, 0.10);
  --glass-inset: inset 1px 1px 0 var(--glass-edge), inset -1px -1px 0 var(--glass-edge-low), inset 0 0 0 1px var(--glass-border), inset 0 -12px 24px -18px rgba(255, 240, 220, 0.18);
  --glass-shadow: 0 0 0 1px var(--glass-line), 0 1px 2px rgba(42, 13, 19, 0.06), 0 18px 48px rgba(42, 13, 19, 0.14);
  --glass-sheen: linear-gradient(160deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.18) 28%, rgba(255, 255, 255, 0) 52%);
  --glass-caustic: radial-gradient(120% 60% at 50% 120%, rgba(255, 255, 255, 0.30), transparent 60%);
  --glass-shadow-sm: 0 0 0 1px var(--glass-line), 0 1px 3px rgba(42, 13, 19, 0.06), 0 8px 22px rgba(42, 13, 19, 0.09);
  --glass-shadow-lift: 0 0 0 1px var(--glass-line), 0 4px 12px rgba(42, 13, 19, 0.07), 0 32px 72px rgba(42, 13, 19, 0.19);
  /* Les commandes posées sur le verre (boutons, champs) : un voile plus clair, lisible, sans flou à elles. */
  --glass-control: rgba(255, 253, 248, 0.58);
  --glass-control-hover: rgba(255, 253, 248, 0.86);
  --glass-field: rgba(255, 253, 248, 0.62);
  --glass-field-hover: rgba(255, 253, 248, 0.82);
  /* Le reflet des aplats pleins (bouton principal, onglet actif) : ils restent pleins, la lumière glisse dessus. */
  --fill-sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.04) 52%, rgba(255, 255, 255, 0) 60%);
  --fill-edge: rgba(255, 255, 255, 0.30);
  /* Le décor derrière le verre : sans couleurs à flouter, le verre ne se voit pas.
     Assez présent pour que le verre se lise, assez léger pour qu'un texte posé à même le fond reste lisible. */
  --ambient-1: rgba(201, 150, 60, 0.55);
  --ambient-2: rgba(140, 44, 62, 0.42);
  --ambient-3: rgba(70, 140, 230, 0.34);
  --ambient-trame: rgba(101, 29, 43, 0.028);

  /* Gabarit */
  --sidebar-w: 248px;
  --sky: #2f8fb5;
  --sun: #c27a12;
  /* Les canaux du fil : une couleur chacun (public/js/content.js → CHANNELS[].tone). */
  --ch-gold: #a8853f;
  --ch-blue: #2d6cdf;
  --ch-green: #1d9a58;
  --ch-violet: #7a52c7;
  --ch-wine: #8c2c3e;
  --tabbar-h: 64px;
  --content-max: 1480px;
}

:root[data-theme='dark'] {
  color-scheme: dark;

  --bg: #100d0e;
  --bg-raised: #17100f;
  --surface: #1f1315;
  --surface-2: #2a0d13;
  --surface-3: #3a1a21;
  --line: rgba(239, 227, 207, 0.08);
  --line-strong: rgba(239, 227, 207, 0.17);
  --sidebar-bg: linear-gradient(180deg, rgba(23, 16, 15, 0.93), rgba(16, 13, 14, 0.93));
  --backdrop: rgba(8, 5, 6, 0.76);

  --text: #efe3cf;
  --text-2: #cdbba2;
  --muted: #a5928a;           /* un cran plus clair qu'avant (#98857a), même raison */

  --gold: #c9a45c;
  --gold-bright: #e2c27a;
  --gold-deep: #8a6a2f;
  --gold-rgb: 201, 164, 92;
  --gold-bright-rgb: 226, 194, 122;
  --gold-soft: rgba(201, 164, 92, 0.14);
  --gold-line: rgba(201, 164, 92, 0.36);
  --gold-fill-from: #e2c27a;
  --gold-fill-to: #b49558;
  --gold-fill-hover: #efd48f;

  --on-gold: #2a0d13;
  --wine: #8c2c3e;
  --wine-deep: #651d2b;
  --wine-rgb: 140, 44, 62;
  --wine-soft: rgba(140, 44, 62, 0.24);

  --overlay: 239, 227, 207;
  --shade: 0 0 0;
  --shade-k: 1;
  --mix: white;
  --tint: 78%;
  --star-rgb: 239, 227, 207;

  --ok: #4fd18b;
  --ok-soft: rgba(79, 209, 139, 0.14);
  --warn: #f0a63a;
  --warn-soft: rgba(240, 166, 58, 0.14);
  --danger: #f2617a;
  --danger-soft: rgba(242, 97, 122, 0.14);
  --info: #5b9bff;
  --info-soft: rgba(91, 155, 255, 0.14);

  --st-scaling: #4fd18b;
  --st-lancement: #e9cd7a;
  --st-developpement: #5b9bff;
  --st-pause: #5b9bff;
  --sky: #6cc3e6;
  --sun: #f2b44a;
  --ch-gold: #e2c27a;
  --ch-blue: #6ea3ff;
  --ch-green: #4fd18b;
  --ch-violet: #b496ff;
  --ch-wine: #f0768f;

  --shadow-1: 0 1px 0 rgba(239, 227, 207, 0.04) inset, 0 8px 24px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 1px 0 rgba(239, 227, 207, 0.06) inset, 0 24px 60px rgba(0, 0, 0, 0.6);
  --glow-gold: 0 0 0 1px var(--gold-line), 0 12px 40px rgba(201, 164, 92, 0.18);

  --glass-bg: rgba(40, 26, 30, 0.34);
  --glass-bg-strong: rgba(40, 26, 30, 0.62);
  --glass-bg-soft: rgba(40, 26, 30, 0.18);
  --glass-tint-wine: rgba(140, 44, 62, 0.20);
  --glass-tint-gold: rgba(201, 164, 92, 0.14);
  --glass-edge: rgba(255, 240, 220, 0.42);
  --glass-edge-low: rgba(255, 240, 220, 0.12);
  --glass-border: rgba(255, 240, 220, 0.16);
  --glass-line: rgba(0, 0, 0, 0.45);
  --glass-shadow: 0 0 0 1px var(--glass-line), 0 2px 8px rgba(0, 0, 0, 0.35), 0 26px 64px rgba(0, 0, 0, 0.55);
  --glass-sheen: linear-gradient(160deg, rgba(255, 244, 228, 0.20) 0%, rgba(255, 244, 228, 0.06) 30%, rgba(255, 244, 228, 0) 54%);
  --glass-caustic: radial-gradient(120% 70% at 50% 118%, rgba(226, 194, 122, 0.10), transparent 60%);
  --glass-shadow-sm: 0 0 0 1px var(--glass-line), 0 1px 3px rgba(0, 0, 0, 0.30), 0 10px 26px rgba(0, 0, 0, 0.40);
  --glass-shadow-lift: 0 0 0 1px var(--glass-line), 0 4px 12px rgba(0, 0, 0, 0.35), 0 34px 80px rgba(0, 0, 0, 0.65);
  --glass-control: rgba(239, 227, 207, 0.07);
  --glass-control-hover: rgba(239, 227, 207, 0.13);
  --glass-field: rgba(8, 5, 6, 0.30);
  --glass-field-hover: rgba(8, 5, 6, 0.40);
  --fill-sheen: linear-gradient(180deg, rgba(255, 250, 238, 0.30), rgba(255, 250, 238, 0.05) 52%, rgba(255, 250, 238, 0) 60%);
  --fill-edge: rgba(255, 250, 238, 0.45);
  --ambient-1: rgba(226, 180, 100, 0.34);
  --ambient-2: rgba(170, 50, 75, 0.50);
  --ambient-3: rgba(80, 140, 255, 0.26);
  --ambient-trame: rgba(201, 164, 92, 0.026);
}

/* 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; }
}