/* =========================================================
   Résonance Design System v3 — Tokens + Base Type
   Locked 20 April 2026
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* ---------- Brand palette (locked) ---------- */
  --rz-orange: #FC442C;     /* Body · Strava data · warmth */
  --rz-blue:   #1772FE;     /* Mind · voice · reflection  */
  --rz-mauve:  #8A5B95;     /* Fusion · Résonance state   */
  --rz-white:  #FAF8F5;     /* Off-white background       */
  --rz-black:  #18140F;     /* Deep black text/logo       */

  /* Alerte récupération — saturated Orange, NEVER red */
  --rz-orange-sat: #FC442C;

  /* ---------- Surfaces ---------- */
  --rz-bg: var(--rz-white);
  --rz-glass:        rgba(255, 255, 255, 0.50);
  --rz-glass-raised: rgba(255, 255, 255, 0.70);
  --rz-glass-nav:    rgba(255, 255, 255, 0.80);
  --rz-border-glass: rgba(255, 255, 255, 0.70);

  /* ---------- Text ---------- */
  --rz-fg1: #18140F;  /* Primary   — titles, key text   */
  --rz-fg2: #5C5650;  /* Secondary — body, reflections  */
  --rz-fg3: #7A726A;  /* Tertiary  — metadata, labels (AA 4.7:1 sur #FAF8F5) */
  --rz-fg3-soft: #A09890; /* Décoratif — bordures, puces, séparateurs uniquement */
  --rz-fg-on-color: #FAF8F5;

  /* ---------- Orb parameters ---------- */
  --rz-orb-blur: 80px;
  --rz-orb-opacity: 0.28;   /* saturated hues — was 0.40 under muted peach */
  --rz-orb-size: 360px;

  /* ---------- Blur / glass ---------- */
  --rz-blur-card: 20px;
  --rz-blur-raised: 28px;

  /* ---------- Spacing scale (base-4) ---------- */
  --rz-space-xs:  4px;
  --rz-space-sm:  8px;
  --rz-space-md:  12px;
  --rz-space-lg:  16px;
  --rz-space-xl:  24px;
  --rz-space-2xl: 32px;

  /* ---------- Radius ---------- */
  --rz-radius-micro:   6px;
  --rz-radius-button: 14px;
  --rz-radius-card:   16px;
  --rz-radius-pill:   20px;
  --rz-radius-round:  9999px;

  /* ---------- Shadow (warm-tinted, never gray) ---------- */
  --rz-shadow-card:    0 8px 24px -12px rgba(24, 20, 15, 0.08);
  --rz-shadow-raised:  0 16px 40px -16px rgba(24, 20, 15, 0.12);

  /* ---------- Motion ---------- */
  --rz-ease: cubic-bezier(0.4, 0.0, 0.2, 1);
  --rz-dur-fast:  200ms;
  --rz-dur-med:   280ms;
  --rz-dur-slow:  400ms;

  /* ---------- Typography families ---------- */
  --rz-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* ---------- Type scale ---------- */
  --rz-size-display: 32px;
  --rz-size-title1:  24px;
  --rz-size-title2:  18px;
  --rz-size-title3:  15px;
  --rz-size-body:    14px;
  --rz-size-caption: 12px;
  --rz-size-micro:   10px;

  --rz-weight-regular: 400;
  --rz-weight-medium:  500;
  --rz-weight-semi:    600;
  --rz-weight-bold:    700;

  --rz-lh: 1.5;
  --rz-tracking-title: -0.3px;
}

/* =========================================================
   Base type — semantic classes
   ========================================================= */

.rz-display,
.rz-title1,
.rz-title2,
.rz-title3,
.rz-body,
.rz-caption,
.rz-micro {
  font-family: var(--rz-font);
  color: var(--rz-fg1);
  line-height: var(--rz-lh);
  margin: 0;
  font-feature-settings: "cv11", "ss01";
}

.rz-display {
  font-size: var(--rz-size-display);
  font-weight: var(--rz-weight-bold);
  letter-spacing: var(--rz-tracking-title);
}

.rz-title1 {
  font-size: var(--rz-size-title1);
  font-weight: var(--rz-weight-bold);
  letter-spacing: var(--rz-tracking-title);
}

.rz-title2 {
  font-size: var(--rz-size-title2);
  font-weight: var(--rz-weight-semi);
  letter-spacing: var(--rz-tracking-title);
}

.rz-title3 {
  font-size: var(--rz-size-title3);
  font-weight: var(--rz-weight-semi);
}

.rz-body {
  font-size: var(--rz-size-body);
  font-weight: var(--rz-weight-regular);
  color: var(--rz-fg2);
}

.rz-caption {
  font-size: var(--rz-size-caption);
  font-weight: var(--rz-weight-regular);
  color: var(--rz-fg3);
}

.rz-micro {
  font-size: var(--rz-size-micro);
  font-weight: var(--rz-weight-medium);
  color: var(--rz-fg3);
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

.rz-transcript {
  font-style: italic;
  color: var(--rz-fg2);
}

/* =========================================================
   Base elements
   ========================================================= */
body {
  font-family: var(--rz-font);
  color: var(--rz-fg1);
  background: var(--rz-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* =========================================================
   Orb background utility
   ========================================================= */
.rz-orb {
  position: absolute;
  width: var(--rz-orb-size);
  height: var(--rz-orb-size);
  border-radius: 50%;
  opacity: var(--rz-orb-opacity);
  filter: blur(var(--rz-orb-blur));
  pointer-events: none;
  will-change: transform;
}
.rz-orb--orange { background: radial-gradient(closest-side, #FC442C 0%, rgba(252,68,44,0) 70%); }
.rz-orb--blue   { background: radial-gradient(closest-side, #1772FE 0%, rgba(23,114,254,0) 70%); }
.rz-orb--mauve  { background: radial-gradient(closest-side, #8A5B95 0%, rgba(138, 91,149,0) 70%); }

/* =========================================================
   Glass card utility
   ========================================================= */
.rz-card {
  background: var(--rz-glass);
  -webkit-backdrop-filter: blur(var(--rz-blur-card));
  backdrop-filter: blur(var(--rz-blur-card));
  border: 1px solid var(--rz-border-glass);
  border-radius: var(--rz-radius-card);
  box-shadow: var(--rz-shadow-card);
  padding: var(--rz-space-lg);
}
.rz-card--raised {
  background: var(--rz-glass-raised);
  -webkit-backdrop-filter: blur(var(--rz-blur-raised));
  backdrop-filter: blur(var(--rz-blur-raised));
  box-shadow: var(--rz-shadow-raised);
}

/* =========================================================
   A11y — focus visible, reduced motion
   ========================================================= */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--rz-mauve);
  outline-offset: 2px;
  border-radius: 6px;
}

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

/* =========================================================
   Fallback navigateurs sans backdrop-filter (iOS < 14, Firefox < 103)
   ========================================================= */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .rz-card,
  .rz-card--raised {
    background: #F5F1EA;
  }
}