/* ============================================================================
 * DESIGN TOKENS — Bleu nuit profond (thème Navy par défaut)
 * ============================================================================
 * Source unique de vérité. Les autres thèmes (Bloc 3) overrideront ces tokens.
 * ============================================================================ */

:root {
  /* ── Layout ───────────────────────────────────────── */
  --app-max: 480px;
  --app-padding-x: 4px;          /* v3.4.1 : encore plus de largeur pour les cards */
  --bottom-nav-h: 72px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  /* ── Couleurs accent (BADGER + UI primaires) ───────── */
  --accent: #4d97ff;
  --accent-2: #6cb5ff;
  --accent-glow: rgba(77, 151, 255, 0.65);

  /* Couleurs liseré nav — multi-couleur premium */
  --nav-glow-1: rgba(167, 139, 250, 0.7);  /* violet */
  --nav-glow-2: rgba(77, 151, 255, 0.85);  /* bleu */
  --nav-glow-3: rgba(34, 211, 238, 0.8);   /* cyan */

  --success: #10b981;
  --success-2: #047857;
  --warning: #fbbf24;
  --orange: #f59e0b;
  --danger: #ef4444;
  --green-bright: #34d399;

  /* Couleurs UI récurrentes (extraites des composants) */
  --white-soft-04: rgba(255, 255, 255, 0.04);
  --white-soft-06: rgba(255, 255, 255, 0.06);
  --white-soft-08: rgba(255, 255, 255, 0.08);
  --white-soft-10: rgba(255, 255, 255, 0.10);
  --white-soft-15: rgba(255, 255, 255, 0.15);
  --white-soft-25: rgba(255, 255, 255, 0.25);

  --dark-deep-55: rgba(8, 18, 38, 0.55);
  --dark-deep-65: rgba(8, 18, 38, 0.65);
  --dark-deep-75: rgba(8, 18, 38, 0.75);
  --dark-deep-94: rgba(8, 18, 38, 0.94);

  /* Glow accents (utilisés pour drop-shadow et box-shadow) */
  --accent-glow-soft: rgba(77, 151, 255, 0.45);
  --accent-glow-medium: rgba(77, 151, 255, 0.55);
  --accent-glow-strong: rgba(120, 184, 255, 0.30);
  --accent-glow-shadow: rgba(77, 151, 255, 0.4);

  /* Couleurs météo (halo doré card horloge) */
  --weather-sun: rgba(251, 191, 36, 0.65);
  --weather-warm: rgba(251, 146, 60, 0.32);

  /* ── BADGER — Couleurs du bouton principal (thémables) ───────
   * Ces tokens DOIVENT être surchargés par chaque thème (Bloc 3).
   * Pour le Navy par défaut : gradient bleu/cyan flash. */
  --badger-c1: #2563eb;  /* Bleu profond — coins */
  --badger-c2: #3b82f6;  /* Bleu medium */
  --badger-c3: #06b6d4;  /* Cyan flash — centre */
  --badger-shadow-1: rgba(59, 130, 246, 0.65);
  --badger-shadow-2: rgba(6, 182, 212, 0.40);
  --badger-shadow-3: rgba(20, 60, 140, 0.50);

  /* ── Texte ─────────────────────────────────────────── */
  --text: #f8fafc;
  --text-muted: rgba(248, 250, 252, 0.62);
  --text-dim: rgba(248, 250, 252, 0.38);

  /* ── Background page — bleu nuit éclairci (Correction #9) ──── */
  --page-bg:
    radial-gradient(ellipse at 50% 0%, rgba(70, 145, 255, 0.32), transparent 42%),
    radial-gradient(ellipse at 8% 92%, rgba(34, 200, 255, 0.18), transparent 45%),
    linear-gradient(180deg, #0e2856 0%, #0a1a3c 50%, #061226 100%);

  /* ── Cards — bleu nuit éclairci ────────────────────────────── */
  --card-bg: linear-gradient(160deg, rgba(28, 50, 95, 0.65), rgba(15, 28, 60, 0.78));
  --card-stroke: rgba(140, 180, 230, 0.20);
  --card-stroke-strong: rgba(160, 195, 240, 0.32);

  /* ── Nav background — plus foncé que le thème ──────────────── */
  --nav-bg: linear-gradient(180deg, rgba(3, 7, 18, 0.98), rgba(1, 3, 10, 1));

  /* ── Radius ────────────────────────────────────────── */
  --radius-card: 22px;
  --radius-button: 18px;
  --radius-icon: 16px;
  --radius-pill: 999px;

  /* Carrés compacts (toggle Réglages → Thèmes, Bloc 3) */
  --radius-card-square: 8px;
  --radius-button-square: 7px;
  --radius-icon-square: 7px;

  /* ── Animations ────────────────────────────────────── */
  --duration-fast: 140ms;
  --duration-base: 220ms;
  --duration-page: 360ms;
  --duration-momentum: 280ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-momentum: cubic-bezier(0.32, 0.72, 0, 1);

  /* ── Animation level (Off / Subtile / Marquée) ─────── */
  /* Réglé par data-anim-level sur <body>, défaut "subtle" */
  --anim-bg-opacity: 0.5;        /* Subtle par défaut */
  --anim-bg-duration: 22s;
}

/* ── Animation level overrides ──────────────────────── */
body[data-anim-level="off"] {
  --anim-bg-opacity: 0;
  --anim-bg-duration: 0s;
}

body[data-anim-level="subtle"] {
  --anim-bg-opacity: 0.5;
  --anim-bg-duration: 22s;
}

body[data-anim-level="strong"] {
  --anim-bg-opacity: 1;
  --anim-bg-duration: 12s;
}

/* ── Forme cartes carrées (toggle Bloc 3) ───────────── */
body[data-card-shape="square"] {
  --radius-card: var(--radius-card-square);
  --radius-button: var(--radius-button-square);
  --radius-icon: var(--radius-icon-square);
}