/* Palette « Arène ». Chargée par le SPA (index.css) et par Django
   (base.html) : un seul fichier, sinon les deux divergent.

   Thème nuit par défaut + thème jour. Gris froid pour le décor, or chaud pour
   ce sur quoi on clique.

   Contrastes vérifiés en AA (4.5:1). L'or du thème clair est à #8F6316 et pas
   #A9761B, qui ne donnait que 3.97:1 sous du blanc. */

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

  /* Fonds, du plus profond au plus proche */
  --ud-bg: #17181c;
  --ud-surface: #22242a;
  --ud-surface-raised: #2c2f37;

  /* Texte */
  --ud-text: #f4f2ed;
  --ud-text-strong: #ffffff;
  --ud-text-muted: #9da0aa;

  /* Traits et séparateurs */
  --ud-border: #383c45;
  --ud-border-strong: #4a4f5a;

  /* accents : or = action, corail = réplique */
  --ud-accent: #e8a93c;
  /* texte sur aplat de couleur. thème sombre = couleurs claires, donc texte
     sombre (blanc sur l'or = 2.06:1) */
  --ud-on-color: #17181c;
  --ud-accent-contrast: var(--ud-on-color);
  --ud-accent-soft: rgba(232, 169, 60, .14);
  --ud-accent-2: #e0736a;

  /* Fond de portrait des combattants */
  --ud-portrait: linear-gradient(150deg, #343842 0%, #23262c 60%, #2e323b 100%);
  /* carte de combattant : sombre dans les 2 thèmes, c'est un objet pas une
     surface d'interface. Les deux bouts du dégradé sont nommés parce que le
     fond de série s'y mêle : sans eux il faudrait réécrire la couleur ici. */
  --ud-carte-fond-haut: rgba(39, 39, 41, .95);
  --ud-carte-fond-bas: rgba(10, 10, 10, .98);
  --ud-carte-fond: linear-gradient(135deg, var(--ud-carte-fond-haut) 0%, var(--ud-carte-fond-bas) 100%);

  /* Fond d'une série débloquée. La teinte venue de la base ne remplace pas
     celui de la carte, elle s'y mêle : posée telle quelle, une couleur vive
     repeindrait la carte d'un aplat sur lequel le portrait détouré et le texte
     blanc se perdent. Les deux parts sont des jetons et non des valeurs dans
     la règle, pour qu'un style de page puisse les rehausser ou les éteindre. */
  --ud-serie-part: 34%;
  --ud-serie-part-basse: 20%;
  --ud-serie-texture-taille: 180px;
  --ud-carte-fond-serie: linear-gradient(135deg,
      color-mix(in oklab, var(--ud-serie, transparent) var(--ud-serie-part), var(--ud-carte-fond-haut)) 0%,
      color-mix(in oklab, var(--ud-serie-2, var(--ud-serie, transparent)) var(--ud-serie-part-basse), var(--ud-carte-fond-bas)) 100%);

  /* sémantique : état, jamais décoratif */
  --ud-success: #46a758;
  --ud-warning: #d98324;
  --ud-danger: #e5484d;
  --ud-info: #6ea8e0;

  /* Part gardée de la couleur d'un titre. Les titres sont saisis en base,
     forcément sur le thème sombre : le défaut du modèle est même le blanc.
     Sur fond clair, une couleur pâle disparaît — on la ramène donc vers la
     couleur du texte, ce qui la fonce sans la remplacer. */
  --ud-titre-ancrage: 100%;

  /* raretés, miroir de RARITY_COLORS côté Django */
  --ud-rarity-common: #9da0aa;
  --ud-rarity-rare: #4a9fd8;
  --ud-rarity-epic: #a86fc4;
  --ud-rarity-legendary: #e8a93c;

  /* Élévation */
  --ud-shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);
  --ud-shadow-md: 0 18px 44px -22px rgba(0, 0, 0, .9);

  /* rayons */
  --ud-radius-sm: 9px;
  --ud-radius: 16px;
  --ud-radius-lg: 22px;
  --ud-radius-pill: 999px;
}

:root[data-theme="light"] {
  color-scheme: light;

  --ud-bg: #f1f0ec;
  --ud-surface: #ffffff;
  --ud-surface-raised: #eae8e2;

  --ud-text: #1a1b1f;
  --ud-text-strong: #000000;
  --ud-text-muted: #6a6d75;

  --ud-border: #dcdad4;
  --ud-border-strong: #c3c0b8;

  /* même or, une marche plus sombre */
  --ud-accent: #8f6316;
  /* thème clair : couleurs sombres, donc texte blanc */
  --ud-on-color: #ffffff;
  --ud-accent-contrast: var(--ud-on-color);
  --ud-accent-soft: rgba(143, 99, 22, .1);
  --ud-accent-2: #b8443b;

  --ud-portrait: linear-gradient(150deg, #e7e5df 0%, #d6d4cd 100%);
  /* carte de combattant : sombre dans les 2 thèmes, c'est un objet pas une
     surface d'interface — les deux bouts et le fond de série valent donc ceux
     du thème sombre, qui sont hérités tels quels. */

  --ud-success: #2f7d3f;
  --ud-warning: #8a5510;
  --ud-danger: #c62a2f;
  --ud-info: #1a6fc4;

  --ud-titre-ancrage: 70%;

  --ud-rarity-common: #74777f;
  --ud-rarity-rare: #1a6fc4;
  --ud-rarity-epic: #7b2d8e;
  --ud-rarity-legendary: #8f6316;

  --ud-shadow-sm: 0 1px 2px rgba(23, 24, 29, .06);
  --ud-shadow-md: 0 12px 32px -18px rgba(23, 24, 29, .28);
}

/* Un navigateur sans color-mix() rendrait la déclaration entière invalide, et
   la carte perdrait tout fond plutôt que sa seule teinte de série. */
@supports not (color: color-mix(in oklab, white, black)) {
  :root {
    --ud-carte-fond-serie: var(--ud-carte-fond);
  }
}