/* Distinction Esthétique Auto — Design Tokens
   Responsibility: CSS custom properties (palette, type, radii, easing)
   + Google Fonts import + typographic utility classes.
   All other files depend on this one; load it first.
*/

@import url('https://fonts.googleapis.com/css2?family=Antonio:wght@200;300;400;500;600;700&family=Manrope:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ── Surfaces — Palette V3 : Anthracite équilibré (Option B, mai 2026)
     Alignée avec brief « hôtel haut de gamme / immeuble corporatif moderne ».
     Bases froides, légèrement bleutées, pour ne pas étouffer l'accent #EB3300. */
  --bg-deep:    #1B1D21;   /* page base — anthracite légèrement bleuté */
  --bg-ink:     #232529;   /* insets, inputs */
  --bg-elev:    #1F2125;   /* elevated / section surfaces */
  --bg-card:    #2A2C30;   /* card surfaces — clearly lighter than bg-deep */
  --bg-cream:   #FAFAF8;   /* off-white (cool warm-neutral, vs ancien #f3ede2) */
  --bg-cream-2: #F2F2EF;   /* cream secondary */
  --bg-chrome:  #14161A;   /* topbar background */
  --bg-footer:  #14161A;   /* footer background */

  /* ── Text ───────────────────────────────────────────────────── */
  --text-cream: #F5F5F4;   /* main light text on dark */
  --text-mute:  #B5B7BC;   /* secondary text — adjusted for cool base */
  --text-dim:   #797C82;   /* tertiary text */
  --text-ink:   #0F1015;   /* main dark text on cream */
  --text-ink-2: #3A3D42;   /* secondary dark text */
  --text-mute-on-cream: #4F5359; /* WCAG AA 7.4:1 sur --bg-cream — descriptions, captions */

  /* ── Accent — Distinction brand orange-red ────────────────────────
     Itération mai 2026 : version intermédiaire entre l'original
     trop flashy (#EB3300) et la version trop assourdie (#C73E15).
     #D54015 conserve la signature brand avec une vivacité contrôlée. */
  --gold:          #D54015;  /* main accent — un cran plus flashy que #C73E15 */
  --gold-hover:    #EB4E1F;  /* hover state — slightly brighter */
  --gold-warm:     #A8330D;  /* darker variant — borders, secondary accents */
  --gold-on-cream: #A22B0A;  /* WCAG AA on --bg-cream — small text/eyebrows on light surfaces */
  --gold-soft:     rgba(213, 64, 21, 0.12);  /* background tint */

  /* ── Liens textuels — couleur brand pour cohérence visuelle.
     Le bleu précédent jurait avec la palette anthracite/orange.
     Les CTAs principaux (boutons) restent identifiables — les liens
     inline héritent simplement de la couleur d'accent. */
  --c-link:        var(--gold);     /* on dark backgrounds — orange brand */
  --c-link-ink:    var(--gold-on-cream); /* on cream / light backgrounds — variant WCAG safe */
  --c-focus:       #3B82F6;         /* focus ring uniquement — bleu vif gardé pour la visibilité accessibilité */

  /* ── Divider lines (palette V3 — base froide) ──────────────── */
  --line:        rgba(245, 245, 244, 0.10);   /* cool off-white tint */
  --line-strong: rgba(245, 245, 244, 0.18);
  --line-ink:    rgba(15, 16, 21, 0.10);

  /* ── Type stacks ────────────────────────────────────────────── */
  --f-display: 'Antonio', 'Oswald', sans-serif;
  --f-body:    'Manrope', 'Helvetica Neue', sans-serif;
  --f-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* ── Radii — premium = small corners, no playful rounding ───── */
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 6px;

  /* ── Easing ─────────────────────────────────────────────────── */
  --ease: cubic-bezier(.2, .7, .25, 1);
}

/* ── Typographic utility classes ────────────────────────────────── */

/* Large editorial display text (Antonio, condensed uppercase) */
.dea-display {
  font-family: var(--f-display);
  font-weight: 300;
  letter-spacing: -0.005em;
  line-height: 0.92;
  text-transform: uppercase;
}

/* Monospace overline label in gold — use above section headings */
.dea-eyebrow {
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}

/* Cream-surface variant — WCAG-safe gold on light backgrounds.
   --gold fails contrast on --bg-cream; --gold-on-cream is AA-compliant. */
.dea-eyebrow--cream {
  color: var(--gold-on-cream);
}

/* Muted monospace caption / metadata label */
.dea-label {
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* Tabular-numeric mono span (prices, counters, specs) */
.dea-num {
  font-family: var(--f-mono);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* 32 px hairline gold rule — inline decorative element */
.dea-rule {
  display: inline-block;
  width: 32px;
  height: 1px;
  background: var(--gold);
  vertical-align: middle;
}