/* ==========================================================================
   AURORA — LES JETONS, ET RIEN QUE LES JETONS
   ==========================================================================

   Transposition fidèle de `templates/pair-design-system.html` du dépôt
   `pair_frontend`, qui est la source canonique du design system : c'est de ce
   fichier que descendent `AppColors`, `AppGradients`, `AppShadows` et
   `AuroraTokens` côté Flutter. Les valeurs ci-dessous sont donc recopiées de
   l'original, pas réinventées — le site et l'application doivent être
   reconnaissables comme le même produit.

   TROIS RÈGLES, REPRISES TELLES QUELLES DE LA DOCTRINE AURORA
   ----------------------------------------------------------
   1. **Aucune couleur littérale hors de ce fichier.** Une feuille ou un
      gabarit qui écrit `#6C63FF` casse le mode sombre en silence : la couleur
      ne bascule pas, et personne ne le voit avant une capture d'écran. Tout
      passe par une variable.
   2. **Le fond n'est plus jamais blanc.** `--bg` vaut `#F3F2FB`. Le blanc pur
      est réservé aux surfaces posées dessus, ce qui donne la profondeur
      caractéristique du produit.
   3. **Jamais d'ombre noire neutre.** Les ombres sont teintées d'encre
      (`rgba(26,26,46,…)`) en clair. Une ombre noire sur un fond violet-gris
      donne ce gris sale qu'on reconnaît immédiatement comme « pas fini ».

   LE MODE SOMBRE EST OBLIGATOIRE, PAS UNE OPTION
   ----------------------------------------------
   L'application impose les deux modes. Un site qui n'en gère qu'un est
   aveuglant pour la moitié des visiteurs du soir — ceux-là mêmes qui
   cherchent un partenaire pour demain matin. Les trois sélecteurs ci-dessous
   couvrent les trois cas : préférence système, choix explicite « sombre »,
   choix explicite « clair » (qui doit pouvoir annuler la préférence système).
   ========================================================================== */

:root {
  /* ── Marque ─────────────────────────────────────────────────────────── */
  --violet: #6C63FF;
  --violet-dark: #4C3FE0;
  --violet-light: #9B95FF;
  --violet-tint: #F0EEFF;
  --violet-tint-strong: #E4E0FF;
  --coral: #FF6B6B;
  --coral-dark: #E8484F;
  --mint: #22D3A7;
  --mint-dark: #0FA37F;
  --amber: #FFB020;
  --amber-dark: #E08700;
  --sky: #38BDF8;
  --sky-dark: #0B93D5;

  /* Logo — le dégradé de l'icône, servant aux aplats de marque. */
  --logo-lavender: #D8B4FE;
  --logo-violet: #8B5CF6;
  --logo-violet-deep: #7C3AED;
  --logo-plum: #3B0764;
  --logo-backdrop: #0B0714;

  /* ── Couleurs d'appel à l'action ────────────────────────────────────────
     Ces quatre crans ne sont PAS les couleurs de marque. Ils ont été
     recalculés côté application pour tenir 4,5:1 sur blanc avec du texte
     blanc dessus : `--violet` à #6C63FF ne donne que 3,6:1, ce qui échoue
     WCAG AA sur un bouton. Le commentaire d'origine note les ratios. */
  --violet-cta-start: #4C3FE0; /* 6,79 sur blanc */
  --violet-cta-end: #7C3AED;   /* 5,70 sur blanc */
  --coral-cta-start: #D0404A;  /* 4,65 sur blanc */
  --coral-cta-end: #B8323A;    /* 5,91 sur blanc */

  /* ── Fonds et surfaces — clair ─────────────────────────────────────── */
  --bg: #F3F2FB;
  --bg-2: #EAE8F7;
  --surface: #FFFFFF;
  --surface-2: #FAF9FE;

  /* ── Encres ─────────────────────────────────────────────────────────── */
  --ink50: #F8F8FC;
  --ink100: #F1F1F7;
  --ink200: #E5E5EE;
  --ink300: #D2D2DE;
  --ink400: #ABABBC;
  --ink500: #86869A;
  --ink550: #66667A;
  --ink600: #626274;
  --ink700: #454558;
  --ink800: #2C2C3D;
  --ink900: #1A1A2E;

  /* ── Rôles de texte ─────────────────────────────────────────────────────
     `--text-tertiary` vaut `--ink550` et non `--ink500` : décision D4 de
     l'audit UX du 11/09/2026. `ink500` ne tenait pas 4,5:1 sur un seul fond
     clair (3,57 sur surface, 2,95 sur bg-2). Le prix assumé est que tertiaire
     et secondaire ne sont plus qu'à 1,06:1 l'un de l'autre — la hiérarchie se
     porte désormais par la taille et la graisse, plus par la teinte. */
  --text-primary: var(--ink900);
  --text-secondary: var(--ink600);
  --text-tertiary: var(--ink550);
  --text-on-accent: #FFFFFF;

  --border: var(--ink200);
  --border-strong: var(--ink300);

  /* ── États ──────────────────────────────────────────────────────────── */
  --success: #16A34A;
  --success-text: #15803D;
  --success-tint: #E8F8EE;
  --error: #DC2626;
  --error-text: #B91C1C;
  --error-tint: #FDEDED;
  --warning: #D97706;
  --warning-text: #B45309;
  --warning-tint: #FEF3E2;
  --info: #3B82F6;
  --info-text: #1D4ED8;
  --info-tint: #EAF2FE;

  /* ── Dégradés ───────────────────────────────────────────────────────── */
  --grad-hero: linear-gradient(135deg, #6C63FF 0%, #9B5DE5 55%, #FF6B6B 130%);
  --grad-violet-cta: linear-gradient(135deg, var(--violet-cta-start), var(--violet-cta-end));
  --grad-coral-cta: linear-gradient(135deg, var(--coral-cta-start), var(--coral-cta-end));
  --grad-mint: linear-gradient(135deg, #22D3A7, #0FA37F);
  --grad-amber: linear-gradient(135deg, #FFC760, #E08700);
  --grad-sky: linear-gradient(135deg, #7DD3FC, #0B93D5);
  --grad-coral: linear-gradient(135deg, #FF9A8B, #E8484F);

  /* ── Rayons ─────────────────────────────────────────────────────────── */
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 26px;
  --r-xl: 34px;
  --r-pill: 999px;

  /* ── Ombres — teintées, jamais noires ──────────────────────────────── */
  --sh-1: 0 2px 8px rgba(26, 26, 46, .06);
  --sh-2: 0 8px 24px rgba(26, 26, 46, .08);
  --sh-3: 0 18px 44px rgba(26, 26, 46, .12);
  --sh-violet: 0 10px 26px rgba(108, 99, 255, .42);
  --sh-coral: 0 10px 26px rgba(232, 72, 79, .36);
  --sh-mint: 0 10px 26px rgba(15, 163, 127, .34);

  /* ── Mouvement ──────────────────────────────────────────────────────────
     Les durées viennent d'`AuroraMotion` : page 280 ms, élément 400 ms,
     apparition 450 ms. Les courbes sont celles du design system. */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-back: cubic-bezier(.34, 1.56, .64, 1);
  --t-page: 280ms;
  --t-element: 400ms;
  --t-pop: 450ms;

  /* ── Typographie ────────────────────────────────────────────────────────
     La pile système, comme dans le design system d'origine
     (`-apple-system, BlinkMacSystemFont, "Segoe UI", Inter, sans-serif`).
     C'est un choix, pas un défaut : aucune police web à télécharger, donc
     aucun texte invisible pendant le chargement, et le site s'affiche avec
     la même lettre que l'application sur le même téléphone. */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* ── Échelle de mise en page ────────────────────────────────────────────
     `AuroraType` n'a pas d'échelle côté application : une taille par rôle.
     Un site n'a pas les mêmes rôles qu'une application (il a des titres de
     section larges, qu'aucun écran mobile n'a), donc l'échelle est propre au
     site — mais elle reste une échelle fermée, nommée par rôle, et aucun
     `font-size` littéral n'apparaît hors de ce fichier. */
  --fs-display: clamp(2.25rem, 1.2rem + 4.2vw, 4.25rem);
  --fs-h1: clamp(1.9rem, 1.2rem + 2.6vw, 3rem);
  --fs-h2: clamp(1.5rem, 1.1rem + 1.5vw, 2.125rem);
  --fs-h3: clamp(1.2rem, 1rem + .6vw, 1.5rem);
  --fs-lead: clamp(1.0625rem, 1rem + .4vw, 1.3125rem);
  --fs-body: 1rem;
  --fs-small: .9375rem;
  --fs-caption: .8125rem;
  --fs-overline: .75rem;

  --wrap: 1140px;
  --wrap-narrow: 760px;
  --gutter: 20px;
}

/* ──────────────────────────────────────────────────────────────────────────
   MODE SOMBRE
   Les trois sélecteurs et leur ordre sont délibérés :
     1. `@media (prefers-color-scheme: dark)` sous `:root:not([data-theme="light"])`
        applique la préférence système — sauf si le visiteur a explicitement
        choisi « clair », que le `:not()` protège.
     2. `:root[data-theme="dark"]` applique un choix explicite, y compris sur
        une machine réglée en clair.
   Sans le `:not()`, le bouton « clair » ne fonctionnerait pas sur un
   téléphone réglé en sombre — le défaut le plus fréquent de ce dispositif.
   ────────────────────────────────────────────────────────────────────────── */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #12121F;
    --bg-2: #0C0C16;
    --surface: #1E1E31;
    --surface-2: #262640;

    --text-primary: #F4F4FA;
    --text-secondary: #C6C6D6;
    --text-tertiary: #9494AC;

    --border: #2E2E47;
    --border-strong: #3A3A55;

    --violet-tint: #241F45;
    --violet-tint-strong: #2C2652;

    --success-tint: #123024;
    --error-tint: #361A1A;
    --warning-tint: #362408;
    --info-tint: #16223D;

    --success-text: var(--mint);
    --error-text: var(--coral);
    --warning-text: var(--amber);
    --info-text: var(--sky);

    /* En sombre les ombres redeviennent noires : c'est l'exception à la
       règle « jamais d'ombre noire », et elle vient de l'application. Une
       ombre teintée d'encre sur un fond presque noir est invisible. */
    --sh-1: 0 2px 8px rgba(0, 0, 0, .4);
    --sh-2: 0 8px 24px rgba(0, 0, 0, .45);
    --sh-3: 0 18px 44px rgba(0, 0, 0, .55);
  }
}

:root[data-theme="dark"] {
  --bg: #12121F;
  --bg-2: #0C0C16;
  --surface: #1E1E31;
  --surface-2: #262640;

  --text-primary: #F4F4FA;
  --text-secondary: #C6C6D6;
  --text-tertiary: #9494AC;

  --border: #2E2E47;
  --border-strong: #3A3A55;

  --violet-tint: #241F45;
  --violet-tint-strong: #2C2652;

  --success-tint: #123024;
  --error-tint: #361A1A;
  --warning-tint: #362408;
  --info-tint: #16223D;

  --success-text: var(--mint);
  --error-text: var(--coral);
  --warning-text: var(--amber);
  --info-text: var(--sky);

  --sh-1: 0 2px 8px rgba(0, 0, 0, .4);
  --sh-2: 0 8px 24px rgba(0, 0, 0, .45);
  --sh-3: 0 18px 44px rgba(0, 0, 0, .55);
}