/* ============================================================
   ARIA — Design tokens
   Source de vérité couleur : le logo ARIA (variante 2024).
   Valeurs échantillonnées sur le fichier logo, pas estimées.
   Tout livrable ARIA (dashboard, landing, rapport) importe CE fichier.
   ------------------------------------------------------------
   Ordre des couches : les composants d'un projet peuvent surcharger
   sans !important en déclarant leurs styles dans une couche ultérieure.
   ============================================================ */

@layer aria.reset, aria.tokens, aria.base, aria.components, aria.utilities;

@layer aria.tokens {
  :root {
    color-scheme: light dark;

    /* --------------------------------------------------------
       TIER 1 — Couleurs littérales (échantillonnées sur le logo)
       Ne JAMAIS utiliser directement dans un composant.
       Passer par les tokens sémantiques du Tier 2.
       -------------------------------------------------------- */

    /* Bleu — les bulles du logo. 2 864 px identiques : c'est l'ancre. */
    --aria-blue-700: #0838A8;
    --aria-blue-600: #0D4EE8; /* ⬅ couleur ARIA de référence */
    --aria-blue-400: #4F81F5; /* variante fond sombre, 5.37:1 sur --aria-ink */
    --aria-blue-100: #E4ECFE;

    /* Violet — tiers gauche du wordmark */
    --aria-violet-700: #5809B8;
    --aria-violet-600: #9715C8;
    --aria-violet-400: #BF48EC; /* fond sombre, 4.97:1 */
    --aria-violet-100: #F2E4FA;

    /* Indigo — centre du wordmark, la charnière bleu↔violet */
    --aria-indigo-600: #502FCF;
    --aria-indigo-400: #846DDE; /* fond sombre, 4.85:1 */

    /* Magenta — tiers droit du wordmark. Accent RARE, voir brandbook. */
    --aria-magenta-700: #B70AC2; /* seule variante lisible en texte (5.47:1) */
    --aria-magenta-600: #DB12B3; /* 4.42:1 → DÉCORATIF SEUL, jamais en corps */
    --aria-magenta-400: #F04ED0; /* fond sombre, 6.22:1 */

    /* Neutres — teintés violet pour rester dans la famille du logo */
    --aria-ink: #0B0A1F;
    --aria-slate-800: #24223F;
    --aria-slate-600: #4A4766;
    --aria-slate-400: #86829F;
    --aria-slate-200: #DAD7E6;
    --aria-slate-100: #EFEDF5;
    --aria-slate-50: #F8F7FB;
    --aria-white: #FFFFFF;

    /* Sémantiques d'état — hors logo, choisies pour cohabiter avec lui */
    --aria-positive: #0E7C5A;
    --aria-positive-bg: #E3F5EE;
    --aria-warning: #9A5B00;
    --aria-warning-bg: #FDF0DC;
    --aria-critical: #C1123A;
    --aria-critical-bg: #FCE6EB;

    /* --------------------------------------------------------
       TIER 2 — Tokens sémantiques
       C'est CE niveau que consomment les composants.
       light-dark() résout selon le color-scheme de l'élément.
       -------------------------------------------------------- */

    --color-bg: light-dark(var(--aria-white), var(--aria-ink));
    --color-bg-subtle: light-dark(var(--aria-slate-50), #141230);
    --color-bg-sunken: light-dark(var(--aria-slate-100), #08071A);
    --color-surface: light-dark(var(--aria-white), #171533);

    --color-text: light-dark(var(--aria-ink), #EDEBF7);
    --color-text-muted: light-dark(var(--aria-slate-600), var(--aria-slate-400));
    --color-text-faint: light-dark(var(--aria-slate-400), #6E6A8C);
    --color-text-on-accent: var(--aria-white);

    --color-accent: light-dark(var(--aria-blue-600), var(--aria-blue-400));
    --color-accent-strong: light-dark(var(--aria-blue-700), var(--aria-blue-600));
    --color-accent-subtle: light-dark(var(--aria-blue-100), #16224E);

    --color-secondary: light-dark(var(--aria-violet-700), var(--aria-violet-400));
    --color-highlight: light-dark(var(--aria-magenta-700), var(--aria-magenta-400));

    --color-border: light-dark(var(--aria-slate-200), #2E2B4F);
    --color-border-strong: light-dark(var(--aria-slate-400), #423E6B);

    --color-positive: light-dark(var(--aria-positive), #4FCFA0);
    --color-warning: light-dark(var(--aria-warning), #E0A44F);
    --color-critical: light-dark(var(--aria-critical), #FF7A96);

    /* --------------------------------------------------------
       SIGNATURE — le spectre du wordmark
       Reproduit la course réelle du dégradé du logo :
       magenta → violet → bleu (centre) → violet → magenta.
       UN SEUL usage à la fois par écran. Voir brandbook §4.
       -------------------------------------------------------- */
    --aria-spectrum: linear-gradient(
      90deg,
      var(--aria-magenta-600) 0%,
      var(--aria-violet-600) 22%,
      var(--aria-violet-700) 38%,
      var(--aria-blue-600) 52%,
      var(--aria-violet-700) 68%,
      var(--aria-violet-600) 84%,
      var(--aria-magenta-600) 100%
    );
    /* Variante courte, pour barres de données (pas de retour magenta) */
    --aria-spectrum-linear: linear-gradient(
      90deg,
      var(--aria-blue-600) 0%,
      var(--aria-indigo-600) 45%,
      var(--aria-violet-600) 75%,
      var(--aria-magenta-600) 100%
    );
    /* Fond hero sombre */
    --aria-veil: radial-gradient(
        120% 140% at 88% 12%,
        color-mix(in oklab, var(--aria-violet-700) 55%, transparent) 0%,
        transparent 62%
      ),
      linear-gradient(135deg, var(--aria-ink) 0%, #1A1140 58%, #2A1560 100%);

    /* --------------------------------------------------------
       TYPOGRAPHIE
       Display serif × corps grotesque × mono pour la donnée.
       Le mono sur les chiffres n'est pas décoratif : c'est
       l'instrument du métier (logs, métriques, volumes).
       -------------------------------------------------------- */
    --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
    --font-body: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
    --font-data: "IBM Plex Mono", ui-monospace, "SF Mono", monospace;

    /* Échelle typographique — ratio 1.25, fluide sur les 3 plus grands crans */
    --text-3xs: 0.6875rem;
    --text-2xs: 0.75rem;
    --text-xs: 0.8125rem;
    --text-sm: 0.9375rem;
    --text-md: 1.0625rem;
    --text-lg: clamp(1.25rem, 1.1rem + 0.6vw, 1.4rem);
    --text-xl: clamp(1.5rem, 1.28rem + 1.1vw, 1.9rem);
    --text-2xl: clamp(2rem, 1.5rem + 2.4vw, 3.1rem);
    --text-3xl: clamp(2.6rem, 1.7rem + 4vw, 4.4rem);

    --leading-tight: 1.08;
    --leading-snug: 1.3;
    --leading-normal: 1.62;

    /* Interlettrage des eyebrows — repris du rapport client existant */
    --tracking-eyebrow: 0.16em;

    /* --------------------------------------------------------
       ESPACEMENT, RAYONS, OMBRES, MOUVEMENT
       -------------------------------------------------------- */
    --space-2xs: 0.25rem;
    --space-xs: 0.5rem;
    --space-sm: 0.75rem;
    --space-md: 1.25rem;
    --space-lg: 2rem;
    --space-xl: 3.25rem;
    --space-2xl: 5.25rem;

    --radius-sm: 0.375rem;
    --radius-md: 0.75rem;
    --radius-lg: 1.125rem;
    --radius-pill: 999px;

    --shadow-sm: 0 1px 2px color-mix(in oklab, var(--aria-ink) 8%, transparent);
    --shadow-md: 0 4px 16px -4px color-mix(in oklab, var(--aria-ink) 14%, transparent);
    --shadow-lg: 0 18px 48px -12px color-mix(in oklab, var(--aria-violet-700) 26%, transparent);

    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --duration-fast: 140ms;
    --duration-base: 260ms;

    --measure: 68ch;
  }

  /* Forced Colors : le spectre disparaît, on garde une frontière système */
  @media (forced-colors: active) {
    :root {
      --aria-spectrum: none;
      --aria-spectrum-linear: none;
    }
  }
}

@layer aria.base {
  body {
    margin: 0;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: var(--text-md);
    line-height: var(--leading-normal);
    -webkit-text-size-adjust: 100%;
    text-rendering: optimizeLegibility;
  }

  :where(h1, h2, h3, h4) {
    font-family: var(--font-display);
    font-weight: 600;
    line-height: var(--leading-tight);
    text-wrap: balance;
    margin-block: 0 var(--space-sm);
    /* Fraunces est variable : on pousse l'axe optique et un léger "soft" */
    font-variation-settings: "SOFT" 12, "WONK" 0;
  }

  :where(p, li) {
    text-wrap: pretty;
    max-inline-size: var(--measure);
  }

  :where(a) {
    color: var(--color-accent);
    text-underline-offset: 0.18em;
    text-decoration-thickness: from-font;
  }

  :where(a):hover:not(:disabled) {
    color: var(--color-accent-strong);
  }

  /* Anneau de focus : outline, jamais box-shadow (survit au mode contraste) */
  :where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
  }

  /* Chiffres tabulaires partout où la donnée s'aligne */
  :where(td, th, .aria-metric, .aria-data) {
    font-variant-numeric: tabular-nums;
  }

  ::selection {
    background: color-mix(in oklab, var(--color-accent) 24%, transparent);
  }

  :where(button, [type="button"], [type="submit"]) {
    min-block-size: 2.75rem;
    font: inherit;
  }

  @media (pointer: coarse) {
    :where(button, a) {
      min-block-size: 2.75rem;
    }
  }

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

@layer aria.components {
  /* ---- SIGNATURE : la barre spectre -----------------------
     Le seul endroit où le dégradé complet du logo a le droit
     d'exister. Un par écran. Voir brandbook §4. */
  .aria-spectrum-rule {
    block-size: 3px;
    border: 0;
    margin: 0;
    background: var(--aria-spectrum);
    border-radius: var(--radius-pill);
  }

  @media (forced-colors: active) {
    .aria-spectrum-rule {
      border-block-start: 2px solid CanvasText;
      block-size: 0;
    }
  }

  /* ---- Eyebrow ------------------------------------------- */
  .aria-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    font-family: var(--font-data);
    font-size: var(--text-2xs);
    font-weight: 500;
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--color-text-muted);
  }

  .aria-eyebrow::before {
    content: "";
    inline-size: 0.5rem;
    block-size: 0.5rem;
    border-radius: 50%;
    background: var(--color-accent);
    flex: none;
  }

  /* ---- Carte KPI ----------------------------------------- */
  .aria-metric {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    padding: var(--space-md);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
  }

  .aria-metric__value {
    font-family: var(--font-data);
    font-size: var(--text-xl);
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--color-accent);
  }

  .aria-metric__label {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    max-inline-size: none;
  }

  /* ---- Barre de données ---------------------------------- */
  .aria-bar {
    block-size: 6px;
    inline-size: 100%;
    background: var(--color-bg-sunken);
    border-radius: var(--radius-pill);
    overflow: hidden;
  }

  .aria-bar__fill {
    display: block;
    block-size: 100%;
    background: var(--aria-spectrum-linear);
    border-radius: inherit;
  }

  @media (forced-colors: active) {
    .aria-bar__fill {
      background: Highlight;
      forced-color-adjust: none;
    }
  }

  /* ---- Encart ------------------------------------------- */
  .aria-callout {
    padding: var(--space-md);
    border-inline-start: 3px solid var(--color-accent);
    border-radius: var(--radius-sm);
    background: var(--color-bg-subtle);
  }

  .aria-callout:where([data-tone="positive"]) {
    border-inline-start-color: var(--color-positive);
  }

  .aria-callout:where([data-tone="critical"]) {
    border-inline-start-color: var(--color-critical);
  }

  /* ---- Bouton -------------------------------------------- */
  .aria-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    padding-inline: var(--space-md);
    padding-block: var(--space-xs);
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    background: var(--color-accent);
    color: var(--color-text-on-accent);
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--duration-fast) var(--ease-out);
  }

  .aria-button:hover:not(:disabled) {
    background: var(--color-accent-strong);
    color: var(--color-text-on-accent);
  }

  .aria-button:where([data-variant="quiet"]) {
    background: transparent;
    color: var(--color-accent);
    border-color: var(--color-border);
  }

  .aria-button:where([data-variant="quiet"]):hover:not(:disabled) {
    background: var(--color-accent-subtle);
    color: var(--color-accent-strong);
  }
}