/* ============================================================
   @arthur-sim/ui — couche TOKENS
   ------------------------------------------------------------
   Trois couches, dans cet ordre :
     1. primitives  --ax-p-*   valeurs brutes. JAMAIS référencées
                               par un composant.
     2. sémantique  --ax-*     les rôles. C'est ce que les
                               composants utilisent, exclusivement.
     3. composant              défini dans components.css.

   Un outil ne surcharge QUE deux variables : --ax-accent et
   --ax-on-accent. Tout le reste en découle.
   ============================================================ */

/* Jost* — revival libre de Futura (géométrique Bauhaus, construite au
   compas et à la règle). Futura est commerciale et non embarquable dans
   un paquet npm ; Jost* en reprend le dessin sous licence ouverte.
   Un seul axe : la graisse. Pas d'axe de largeur. */
@font-face {
  font-family: "Jost";
  src: url("./fonts/jost-var.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@layer arfex.tokens {
  :root {
    /* ─── 1. PRIMITIVES ─────────────────────────────────────
       Neutres strictement achromatiques : les accents sont des
       couleurs de signal, ils ne doivent rivaliser avec rien. */
    --ax-p-n0: #ffffff;
    --ax-p-n1: #f4f4f4;
    --ax-p-n2: #ebebeb;
    --ax-p-n3: #dedede;
    --ax-p-n4: #c8c8c8;
    --ax-p-n5: #a4a4a4;
    --ax-p-n6: #7d7d7d;
    --ax-p-n7: #5a5a5a;
    --ax-p-n8: #3d3d3d;
    --ax-p-n9: #292929;
    --ax-p-n10: #1c1c1c;
    --ax-p-n11: #131313;

    /* Sémantique universelle — jamais décorative.
       Le vert et le rouge ne veulent dire que bon et mauvais. */
    --ax-p-positive: #17864a;
    --ax-p-positive-bright: #2fce7a;
    --ax-p-negative: #c62b3c;
    --ax-p-negative-bright: #ff5f70;
    --ax-p-caution: #9a6b00;
    --ax-p-caution-bright: #f0b429;

    /* Palette data-viz catégorielle — indépendante des accents
       d'outil (sinon un graphe changerait de sens d'un outil à
       l'autre). Séparation testée en deutéranopie/protanopie. */
    --ax-p-cat-1: #2f6fd0;
    --ax-p-cat-2: #e08b00;
    --ax-p-cat-3: #128a80;
    --ax-p-cat-4: #b5479b;
    --ax-p-cat-5: #6b7280;
    --ax-p-cat-6: #8a5a2b;

    /* Grille 8 pt */
    --ax-p-space-1: 4px;
    --ax-p-space-2: 8px;
    --ax-p-space-3: 12px;
    --ax-p-space-4: 16px;
    --ax-p-space-5: 20px;
    --ax-p-space-6: 24px;
    --ax-p-space-8: 32px;
    --ax-p-space-10: 40px;
    --ax-p-space-12: 48px;
    --ax-p-space-16: 64px;

    /* Rayons concentriques */
    --ax-p-radius-1: 4px;
    --ax-p-radius-2: 6px;
    --ax-p-radius-3: 10px;
    --ax-p-radius-4: 14px;
    --ax-p-radius-full: 999px;

    /* Échelle de type. Deux voix dans UNE famille :
       les chiffres en large et gras, les étiquettes en étroit,
       minuscules et très espacées. */
    --ax-p-font: "Jost", ui-sans-serif, system-ui, sans-serif;
    --ax-p-font-mono: ui-monospace, "SF Mono", Menlo, monospace;

    --ax-p-text-eyebrow: 11px;
    --ax-p-text-caption: 12px;
    --ax-p-text-body: 14px;
    --ax-p-text-lead: 16px;
    --ax-p-text-title: 20px;
    --ax-p-text-heading: 28px;
    --ax-p-text-metric: 40px;
    --ax-p-text-hero: 56px;

    /* Deux voix, obtenues par la graisse et le tracking — Jost* n'ayant
       pas d'axe de largeur. L'étiquette chuchote, le chiffre parle. */
    --ax-p-track-eyebrow: 0.11em;
    --ax-p-track-metric: -0.02em;
    --ax-p-weight-label: 500;
    --ax-p-weight-metric: 650;

    /* Interligne resserré : Apple tient ses styles macOS à 1,23
       (13 pt / 16 pt). 1,45 était trop lâche pour du tableau de bord. */
    --ax-p-leading-tight: 1.25;
    --ax-p-leading-body: 1.38;

    /* Mouvement — court, jamais spectaculaire. */
    --ax-p-ease: cubic-bezier(0.2, 0, 0, 1);
    --ax-p-dur-1: 90ms;
    --ax-p-dur-2: 160ms;
    --ax-p-dur-3: 260ms;

    /* ─── 2. SÉMANTIQUE — thème clair ──────────────────────── */
    color-scheme: light;

    --ax-canvas: var(--ax-p-n1);
    --ax-surface: var(--ax-p-n0);
    --ax-surface-sunken: var(--ax-p-n2);
    --ax-surface-hover: var(--ax-p-n1);

    --ax-label: var(--ax-p-n11);
    --ax-label-secondary: var(--ax-p-n7);
    --ax-label-tertiary: var(--ax-p-n6);
    --ax-label-quiet: var(--ax-p-n5);

    --ax-line: var(--ax-p-n3);
    --ax-line-strong: var(--ax-p-n4);
    --ax-fill: var(--ax-p-n2);
    --ax-fill-strong: var(--ax-p-n3);

    /* L'action principale est NEUTRE, pas accentuée : neuf outils
       ont neuf accents, un bouton encrenoir reste lisible partout
       et fait tenir la suite ensemble. L'accent sert l'identité. */
    --ax-ink: var(--ax-p-n11);
    --ax-on-ink: var(--ax-p-n0);

    --ax-positive: var(--ax-p-positive);
    --ax-negative: var(--ax-p-negative);
    --ax-caution: var(--ax-p-caution);

    /* Accent — LES DEUX SEULES VARIABLES QU'UN OUTIL SURCHARGE.
       Défaut : le gris du parc, pour qu'un oubli se voie. */
    --ax-accent: #7d7d7d;
    /* Encre par défaut : sur les 8 accents mesurés, 7 exigent un
       texte foncé. Seul un accent très sombre (Doyle) passe au blanc. */
    --ax-on-accent: var(--ax-p-n11);

    /* Dérivés — jamais surchargés à la main.
       L=0.52 en clair garantit ≥4,85:1 sur les 7 accents mesurés. */
    --ax-accent-text: oklch(from var(--ax-accent) 0.52 c h);
    --ax-accent-soft: color-mix(
      in oklab,
      var(--ax-accent) 13%,
      var(--ax-surface)
    );
    --ax-accent-line: color-mix(
      in oklab,
      var(--ax-accent) 42%,
      var(--ax-surface)
    );

    /* Rampe des logos. Le pixel art de chaque outil est dessiné en trois
       tons : l'accent, puis deux éclaircies à 30 % et 60 % de blanc.
       `Proof:` mesuré sur les 7 logos, écart max 1,4 point. Reproduire la
       rampe ici fait qu'une jauge, une série de graphique ou un badge
       puisent dans les mêmes tons que le logo posé à côté. */
    --ax-accent-tint-1: color-mix(in srgb, var(--ax-accent) 70%, white);
    --ax-accent-tint-2: color-mix(in srgb, var(--ax-accent) 40%, white);

    --ax-focus: var(--ax-accent-text);

    --ax-shadow-1: 0 1px 2px rgb(0 0 0 / 0.06);
    --ax-shadow-2: 0 6px 20px -6px rgb(0 0 0 / 0.16);

    /* Alias d'usage courant */
    --ax-space-1: var(--ax-p-space-1);
    --ax-space-2: var(--ax-p-space-2);
    --ax-space-3: var(--ax-p-space-3);
    --ax-space-4: var(--ax-p-space-4);
    --ax-space-5: var(--ax-p-space-5);
    --ax-space-6: var(--ax-p-space-6);
    --ax-space-8: var(--ax-p-space-8);
    --ax-space-10: var(--ax-p-space-10);
    --ax-space-12: var(--ax-p-space-12);
    --ax-space-16: var(--ax-p-space-16);
    --ax-radius-control: var(--ax-p-radius-2);
    --ax-radius-card: var(--ax-p-radius-3);
    --ax-radius-panel: var(--ax-p-radius-4);
  }

  /* ─── Thème sombre ────────────────────────────────────────
     Graphite, pas noir : les accents de signal brûlent sur du
     noir pur. Les surfaces montent en s'éclaircissant. */
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      color-scheme: dark;

      --ax-canvas: var(--ax-p-n11);
      --ax-surface: var(--ax-p-n10);
      --ax-surface-sunken: #0d0d0d;
      --ax-surface-hover: var(--ax-p-n9);

      --ax-label: #f2f2f2;
      --ax-label-secondary: var(--ax-p-n5);
      --ax-label-tertiary: var(--ax-p-n6);
      --ax-label-quiet: var(--ax-p-n7);

      --ax-line: #2e2e2e;
      --ax-line-strong: var(--ax-p-n8);
      --ax-fill: var(--ax-p-n9);
      --ax-fill-strong: var(--ax-p-n8);

      --ax-ink: #f2f2f2;
      --ax-on-ink: var(--ax-p-n11);

      --ax-positive: var(--ax-p-positive-bright);
      --ax-negative: var(--ax-p-negative-bright);
      --ax-caution: var(--ax-p-caution-bright);

      /* L=0.82 en sombre : ≥7,6:1 sur les 7 accents mesurés. */
      --ax-accent-text: oklch(from var(--ax-accent) 0.82 c h);
      --ax-accent-soft: color-mix(
        in oklab,
        var(--ax-accent) 18%,
        var(--ax-surface)
      );
      --ax-accent-line: color-mix(
        in oklab,
        var(--ax-accent) 46%,
        var(--ax-surface)
      );

      --ax-shadow-1: 0 1px 2px rgb(0 0 0 / 0.5);
      --ax-shadow-2: 0 8px 24px -8px rgb(0 0 0 / 0.7);
    }
  }

  /* Même bloc, forcé par l'utilisateur. La bascule manuelle doit
     l'emporter dans les deux sens — d'où la duplication assumée. */
  :root[data-theme="dark"] {
    color-scheme: dark;

    --ax-canvas: var(--ax-p-n11);
    --ax-surface: var(--ax-p-n10);
    --ax-surface-sunken: #0d0d0d;
    --ax-surface-hover: var(--ax-p-n9);

    --ax-label: #f2f2f2;
    --ax-label-secondary: var(--ax-p-n5);
    --ax-label-tertiary: var(--ax-p-n6);
    --ax-label-quiet: var(--ax-p-n7);

    --ax-line: #2e2e2e;
    --ax-line-strong: var(--ax-p-n8);
    --ax-fill: var(--ax-p-n9);
    --ax-fill-strong: var(--ax-p-n8);

    --ax-ink: #f2f2f2;
    --ax-on-ink: var(--ax-p-n11);

    --ax-positive: var(--ax-p-positive-bright);
    --ax-negative: var(--ax-p-negative-bright);
    --ax-caution: var(--ax-p-caution-bright);

    --ax-accent-text: oklch(from var(--ax-accent) 0.82 c h);
    --ax-accent-soft: color-mix(
      in oklab,
      var(--ax-accent) 18%,
      var(--ax-surface)
    );
    --ax-accent-line: color-mix(
      in oklab,
      var(--ax-accent) 46%,
      var(--ax-surface)
    );

    --ax-shadow-1: 0 1px 2px rgb(0 0 0 / 0.5);
    --ax-shadow-2: 0 8px 24px -8px rgb(0 0 0 / 0.7);
  }
}