/* La page de connexion d'Authelia aux couleurs de Loom.
 *
 * Authelia tire toute sa palette de quelques variables (son
 * `web/src/themes/tailwind-themes.css`, à la manière de shadcn/ui) et
 * pose `data-theme="light"` ou `"dark"` sur <html> selon le système
 * (`theme: auto`). On les redéfinit ici pour ces deux valeurs, avec les
 * jetons de Loom (`loom/static/ds_tokens.css`) : sa police, ses surfaces
 * tièdes, son accent, son rayon. `tests/test_authelia_compte.py` garde
 * chaque valeur égale à celle de Loom — si la charte de l'atelier
 * bouge, ce fichier rougit au lieu de dériver.
 *
 * nginx l'ajoute à la page (`sub_filter`, deploiement/authelia/nginx/
 * auth.conf) et le sert du même domaine que le portail : la politique
 * de contenu d'Authelia (`style-src 'self'`) l'accepte telle quelle,
 * et le binaire n'est pas touché. Une mise à jour d'Authelia qui
 * renommerait ces variables ramènerait sa palette d'origine — la page
 * resterait juste, elle cesserait seulement d'être à nos couleurs.
 */

@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("AtkinsonHyperlegibleNext-Variable.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-sans: "Atkinson Hyperlegible Next", -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
}

html[data-theme="light"] {
  --background: #f3efef;            /* --surface-sunken */
  --foreground: #0d0a0b;            /* --ink */
  --card: #ffffff;                  /* --surface */
  --card-foreground: #0d0a0b;
  --popover: #ffffff;
  --popover-foreground: #0d0a0b;
  --primary: #2e4c80;               /* --accent */
  --primary-foreground: #ffffff;    /* --accent-ink */
  --muted: #ede9ea;                 /* --surface-tertiary */
  --muted-foreground: #666263;      /* --ink-muted */
  --accent: #ede9ea;
  --accent-foreground: #0d0a0b;
  --border: #d2cecf;                /* --border-color */
  --input: #d2cecf;
  --ring: #2e4c80;
  --radius: 0.5056rem;              /* --radius : φ × 6, 8,09 px */
  --custom-icon: #0d0a0b;
  --custom-loading-bar: #2e4c80;
}

html[data-theme="dark"] {
  --background: #1c1819;            /* --surface-sunken */
  --foreground: #f3efef;            /* --ink */
  --card: #252222;                  /* --surface */
  --card-foreground: #f3efef;
  --popover: #252222;
  --popover-foreground: #f3efef;
  --primary: #a4bfec;               /* --accent */
  --primary-foreground: #0d0a0b;    /* --accent-ink */
  --muted: #353232;                 /* --surface-tertiary */
  --muted-foreground: #a7a3a4;      /* --ink-muted */
  --accent: #353232;
  --accent-foreground: #f3efef;
  --border: #464343;                /* --border-color */
  --input: #464343;
  --ring: #a4bfec;
  --radius: 0.5056rem;
  --custom-icon: #f3efef;
  --custom-loading-bar: #a4bfec;
}

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