/* ==========================================================================
   ASTRIONI — DESIGN TOKENS (socle commun)
   Système unifié, framework-agnostique. Vanilla CSS custom properties.
   Surcharge par marque : ne redéfinir QUE --brand-accent (+ --brand-accent-text
   / --brand-accent-contrast pour garantir le contraste AA). Tout le reste dérive.
   Thème : clair par défaut ; .theme-dark ou [data-theme="dark"] pour le sombre.
   ========================================================================== */

:root {
  color-scheme: light;

  /* ---------------------------------------------------------------------- *
   * 1. PALETTES PRIMITIVES (échelles 50 → 950)                              *
   * ---------------------------------------------------------------------- */

  /* Encre navy — couleur de confiance, texte & ombres */
  --navy-50:  #eef3f8;
  --navy-100: #d8e3ee;
  --navy-200: #b4c8db;
  --navy-300: #87a4c0;
  --navy-400: #557fa1;
  --navy-500: #2f5b7e;
  --navy-600: #1f4567;
  --navy-700: #16324f;  /* ★ encre de marque */
  --navy-800: #11283f;
  --navy-900: #0b1b2c;
  --navy-950: #06121e;

  /* Papier — fonds chauds crème */
  --paper-0:   #fdfbf7; /* le plus clair (cartes) */
  --cream-50:  #fbf7f1; /* bg-soft historique */
  --cream-100: #f5efe6; /* bg historique */
  --cream-200: #ece1d2;
  --cream-300: #ddccb7;
  --cream-400: #c9b497;

  /* Or / orange — accent chaud (arkhoni) */
  --gold-50:  #fff6e8;
  --gold-100: #ffe7c4;
  --gold-200: #ffd089;
  --gold-300: #ffb751;
  --gold-400: #ff9f24;
  --gold-500: #ff8c00;  /* ★ accent or */
  --gold-600: #e07700;
  --gold-700: #c96900;  /* texte AA sur crème */
  --gold-800: #9b5100;
  --gold-900: #6d3900;

  /* Vert profond — accent fédérateur (astrioni) */
  --green-50:  #ecf5f1;
  --green-100: #cfe8dd;
  --green-200: #a2d2c0;
  --green-300: #6fb6a0;
  --green-400: #439079;
  --green-500: #2f6b57;  /* ★ vert profond */
  --green-600: #285b49;
  --green-700: #20493b;
  --green-800: #17382e;
  --green-900: #0f261f;

  /* Terracotta — accent cousin (athenori) */
  --coral-50:  #fdeee9;
  --coral-100: #f9d4c9;
  --coral-200: #f0ab98;
  --coral-300: #e5836a;
  --coral-400: #d96a4c;
  --coral-500: #cf5a3f;  /* ★ terracotta */
  --coral-600: #b54730;
  --coral-700: #93381f;  /* texte AA sur crème */
  --coral-800: #702b18;
  --coral-900: #4d1d10;

  /* ---------------------------------------------------------------------- *
   * 2. COULEURS SÉMANTIQUES (mappées sur les surfaces claires)              *
   * ---------------------------------------------------------------------- */

  /* Marque / encre */
  --color-ink:            var(--navy-700);
  --color-ink-strong:     var(--navy-900);

  /* Surfaces & fonds */
  --surface-bg:           var(--cream-100);
  --surface-bg-soft:      var(--cream-50);
  --surface-card:         var(--paper-0);
  --surface-raised:       #ffffff;
  --surface-sunken:       var(--cream-200);
  --surface-inverse:      var(--navy-800);

  /* Texte */
  --text-primary:         var(--navy-700);
  --text-secondary:       #4a5d70;   /* AA sur crème */
  --text-muted:           #687a8b;   /* meta / large only */
  --text-inverse:         var(--cream-50);
  --text-inverse-soft:    #c7d3df;

  /* Bordures */
  --border-subtle:        rgba(22, 50, 79, 0.10);
  --border-default:       rgba(22, 50, 79, 0.16);
  --border-strong:        rgba(22, 50, 79, 0.30);
  --border-inverse:       rgba(251, 247, 241, 0.16);

  /* Sémantiques — fill (500) + text (AA sur crème) + soft (tint) */
  --success:        #2e7d57;
  --success-text:   #226045;
  --success-soft:   #e6f3ec;
  --warning:        #d4920a;
  --warning-text:   #8a5e00;
  --warning-soft:   #fbf0d6;
  --danger:         #c63a2b;
  --danger-text:    #9d2a1e;
  --danger-soft:    #fbe7e3;
  --info:           #2f6fb0;
  --info-text:      #235688;
  --info-soft:      #e6eff8;

  /* ---------------------------------------------------------------------- *
   * 3. ACCENT PAR MARQUE — contrat de surcharge                            *
   * Défaut = héritage or (arkhoni). Une marque ne redéfinit que les 3      *
   * premières lignes ; le reste se dérive automatiquement.                 *
   * ---------------------------------------------------------------------- */

  --brand-accent:          var(--gold-500);
  --brand-accent-text:     var(--gold-700);   /* texte AA sur crème/clair */
  --brand-accent-contrast: var(--navy-900);   /* texte/icone POSÉ sur l'accent */

  /* — dérivés (ne pas surcharger sauf besoin) — */
  --brand-accent-strong:  color-mix(in oklab, var(--brand-accent), #000 12%);
  --brand-accent-pressed: color-mix(in oklab, var(--brand-accent), #000 22%);
  --brand-accent-soft:    color-mix(in oklab, var(--brand-accent), var(--paper-0) 86%);
  --brand-accent-tint:    color-mix(in oklab, var(--brand-accent), var(--paper-0) 70%);
  --brand-accent-border:  color-mix(in srgb, var(--brand-accent), transparent 64%);
  --brand-accent-ring:    color-mix(in srgb, var(--brand-accent), transparent 52%);

  /* — couche PERSONNALITÉ par marque (variation d'accent au-delà de la couleur) — */
  --brand-radius-k:           1;                       /* caractère des angles (×) : net < 1 < rond */
  --brand-overline-transform: uppercase;               /* accent typo : casse de l'overline */
  --brand-overline-tracking:  var(--tracking-overline); /* accent typo : interlettrage overline */
  --brand-num-font:           var(--font-mono);         /* police des chiffres-clés (scores, prix) */
  --brand-display-weight:     600;                      /* graisse du display */

  /* ---------------------------------------------------------------------- *
   * 4. TYPOGRAPHIE                                                          *
   * ---------------------------------------------------------------------- */

  --font-display: "Newsreader", Georgia, "Times New Roman", serif;
  --font-body:    "Hanken Grotesk", ui-sans-serif, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;

  /* Échelle modulaire (base 16px, ratio ~1.25) */
  --text-2xs:  0.6875rem;  /* 11 — overline */
  --text-xs:   0.75rem;    /* 12 */
  --text-sm:   0.875rem;   /* 14 */
  --text-base: 1rem;       /* 16 */
  --text-md:   1.125rem;   /* 18 */
  --text-lg:   1.25rem;    /* 20 */
  --text-xl:   1.5rem;     /* 24 — h5 */
  --text-2xl:  1.875rem;   /* 30 — h4 */
  --text-3xl:  2.25rem;    /* 36 — h3 */
  --text-4xl:  3rem;       /* 48 — h2 */
  --text-5xl:  3.75rem;    /* 60 — h1 */
  --text-6xl:  4.5rem;     /* 72 — display */

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  --leading-none:    1;
  --leading-tight:   1.12;
  --leading-snug:    1.28;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  --tracking-tight:    -0.02em;
  --tracking-normal:   0;
  --tracking-wide:     0.04em;
  --tracking-overline: 0.14em;

  /* ---------------------------------------------------------------------- *
   * 5. ESPACEMENT — base 4/8 harmonique                                    *
   * ---------------------------------------------------------------------- */

  --space-0:   0;
  --space-1:   0.25rem;  /* 4  */
  --space-2:   0.5rem;   /* 8  */
  --space-3:   0.75rem;  /* 12 */
  --space-4:   1rem;     /* 16 */
  --space-5:   1.25rem;  /* 20 */
  --space-6:   1.5rem;   /* 24 */
  --space-8:   2rem;     /* 32 */
  --space-10:  2.5rem;   /* 40 */
  --space-12:  3rem;     /* 48 */
  --space-16:  4rem;     /* 64 */
  --space-20:  5rem;     /* 80 */
  --space-24:  6rem;     /* 96 */
  --space-32:  8rem;     /* 128 */

  /* ---------------------------------------------------------------------- *
   * 6. RAYONS — doux (héritage 14/20/28)                                    *
   * ---------------------------------------------------------------------- */

  --radius-xs:   calc(8px  * var(--brand-radius-k, 1));
  --radius-sm:   calc(12px * var(--brand-radius-k, 1));
  --radius-md:   calc(14px * var(--brand-radius-k, 1));
  --radius-lg:   calc(20px * var(--brand-radius-k, 1));
  --radius-xl:   calc(28px * var(--brand-radius-k, 1));
  --radius-2xl:  calc(36px * var(--brand-radius-k, 1));
  --radius-pill: 999px;

  /* ---------------------------------------------------------------------- *
   * 7. ÉLÉVATIONS — ombres diffuses navy (héritage)                         *
   * ---------------------------------------------------------------------- */

  --shadow-xs: 0 1px 2px rgba(22, 50, 79, 0.06);
  --shadow-sm: 0 2px 8px rgba(22, 50, 79, 0.08);
  --shadow-md: 0 8px 24px rgba(22, 50, 79, 0.10);
  --shadow-lg: 0 18px 55px rgba(22, 50, 79, 0.12);  /* ★ héritage */
  --shadow-xl: 0 30px 80px rgba(22, 50, 79, 0.16);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.5);

  /* ---------------------------------------------------------------------- *
   * 8. FOCUS / ANNEAU — visible ≥ 3:1                                       *
   * ---------------------------------------------------------------------- */

  --focus-ring-width:  3px;
  --focus-ring-offset: 2px;
  --focus-ring-color:  var(--brand-accent-ring);

  /* ---------------------------------------------------------------------- *
   * 9. Z-INDEX                                                              *
   * ---------------------------------------------------------------------- */

  --z-base:     0;
  --z-raised:   10;
  --z-sticky:   1100;
  --z-dropdown: 1200;
  --z-overlay:  1300;
  --z-modal:    1400;
  --z-toast:    1500;
  --z-tooltip:  1600;

  /* ---------------------------------------------------------------------- *
   * 10. POINTS DE RUPTURE (référence — utiliser en @media)                  *
   * ---------------------------------------------------------------------- */

  --bp-xs:  320px;
  --bp-sm:  480px;
  --bp-md:  768px;
  --bp-lg:  1024px;
  --bp-xl:  1280px;
  --bp-2xl: 1536px;
  --bp-3xl: 1920px;

  /* Largeurs de contenu */
  --container-sm: 640px;
  --container-md: 880px;
  --container-lg: 1120px;
  --container-xl: 1320px;

  /* ---------------------------------------------------------------------- *
   * 11. MOTION                                                              *
   * ---------------------------------------------------------------------- */

  --duration-instant: 80ms;
  --duration-fast:    140ms;
  --duration-base:    220ms;
  --duration-slow:    340ms;

  --ease-standard:   cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-out:        cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out:     cubic-bezier(0.4, 0, 0.2, 1);
  --ease-emphasized: cubic-bezier(0.2, 0.9, 0.1, 1);

  /* Cibles tactiles min (accessibilité) */
  --tap-target: 44px;

  /* ---------------------------------------------------------------------- *
   * 12. ATMOSPHÈRE — grain + maillage discret (refresh premium)            *
   * ---------------------------------------------------------------------- */

  --mesh-1: radial-gradient(60% 90% at 12% 0%, color-mix(in oklab, var(--brand-accent), transparent 88%), transparent 60%);
  --mesh-2: radial-gradient(50% 80% at 100% 8%, color-mix(in oklab, var(--green-300), transparent 90%), transparent 60%);
  --mesh-3: radial-gradient(70% 120% at 50% 100%, color-mix(in oklab, var(--navy-200), transparent 88%), transparent 60%);
  --grain-opacity: 0.035;
}

/* ========================================================================== *
 * SURCHARGES PAR MARQUE — appliquer la classe sur <html> ou <body>           *
 * Une marque ne redéfinit que 3 variables. Le reste dérive.                  *
 * ========================================================================== */

/* arkhoni — concurrence locale : radar, équilibré, chiffres mono */
.brand-arkhoni {
  --brand-accent: var(--gold-500); --brand-accent-text: var(--gold-700); --brand-accent-contrast: var(--navy-900);
  --brand-radius-k: 1;
}

/* astrioni — hub fédérateur : chaleureux, équilibré */
.brand-astrioni {
  --brand-accent: var(--green-500); --brand-accent-text: var(--green-700); --brand-accent-contrast: #ffffff;
  --brand-radius-k: 1.1;
}

/* athenori — audit perf/sécurité : technique & net, angles serrés, capitales larges */
.brand-athenori {
  --brand-accent: var(--coral-500); --brand-accent-text: var(--coral-700); --brand-accent-contrast: #ffffff;
  --brand-radius-k: 0.5;
  --brand-overline-tracking: 0.24em;
}

/* aedironi — constructeur de site : structuré, grille */
.brand-aedironi {
  --brand-accent: #8254a8; --brand-accent-text: #6a3f8c; --brand-accent-contrast: #ffffff;
  --brand-radius-k: 0.85;
}

/* argyroni — facturation : précis, registre, chiffres mono */
.brand-argyroni {
  --brand-accent: #3a6ea5; --brand-accent-text: #2b5683; --brand-accent-contrast: #ffffff;
  --brand-radius-k: 0.7;
}

/* actaoni — devis & contrats : formel, carré, chiffres serif */
.brand-actaoni {
  --brand-accent: #2c8a8f; --brand-accent-text: #1f6468; --brand-accent-contrast: #ffffff;
  --brand-radius-k: 0.55;
  --brand-num-font: var(--font-display);
}

/* asteroni — avis Google : amical, étoiles, chiffres mono */
.brand-asteroni {
  --brand-accent: #d9a300; --brand-accent-text: #8a6500; --brand-accent-contrast: var(--navy-900);
  --brand-radius-k: 1.25;
}

/* alearoni — mini-jeux promo : joueur, très rond, overline en casse normale */
.brand-alearoni {
  --brand-accent: #d83f7d; --brand-accent-text: #a52456; --brand-accent-contrast: #ffffff;
  --brand-radius-k: 1.6;
  --brand-overline-transform: none;
  --brand-overline-tracking: 0.02em;
}

/* ========================================================================== *
 * THÈME SOMBRE — mapping cohérent des tokens                                  *
 * Activer via .theme-dark ou [data-theme="dark"]                              *
 * ========================================================================== */

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

  --surface-bg:        var(--navy-900);
  --surface-bg-soft:   var(--navy-800);
  --surface-card:      #14304c;
  --surface-raised:    #193a5c;
  --surface-sunken:    var(--navy-950);
  --surface-inverse:   var(--cream-100);

  --color-ink:         var(--cream-50);
  --color-ink-strong:  #ffffff;

  --text-primary:      #f1ece3;
  --text-secondary:    #b3c2d1;
  --text-muted:        #8497a8;
  --text-inverse:      var(--navy-900);
  --text-inverse-soft: #3a4f63;

  --border-subtle:     rgba(245, 239, 230, 0.10);
  --border-default:    rgba(245, 239, 230, 0.16);
  --border-strong:     rgba(245, 239, 230, 0.30);
  --border-inverse:    rgba(22, 50, 79, 0.20);

  /* L'accent reste mais s'éclaire pour tenir sur fond sombre */
  --brand-accent-text:  color-mix(in oklab, var(--brand-accent), #fff 24%);
  --brand-accent-soft:  color-mix(in oklab, var(--brand-accent), var(--navy-900) 80%);
  --brand-accent-tint:  color-mix(in oklab, var(--brand-accent), var(--navy-900) 60%);

  --success-soft: color-mix(in oklab, var(--success), var(--navy-900) 78%);
  --warning-soft: color-mix(in oklab, var(--warning), var(--navy-900) 78%);
  --danger-soft:  color-mix(in oklab, var(--danger),  var(--navy-900) 78%);
  --info-soft:    color-mix(in oklab, var(--info),    var(--navy-900) 78%);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.40);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.45);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.50);
  --shadow-lg: 0 18px 55px rgba(0, 0, 0, 0.55);
  --shadow-xl: 0 30px 80px rgba(0, 0, 0, 0.60);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.06);

  --grain-opacity: 0.05;
}

/* ========================================================================== *
 * PRÉFÉRENCES UTILISATEUR                                                      *
 * ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-instant: 0ms;
    --duration-fast:    0ms;
    --duration-base:    0ms;
    --duration-slow:    0ms;
  }
}