/* Accent RGB animé : cycle piloté en JS (js/app.js) — setProperty('--accent') sur :root,
   fiable sur tous les navigateurs contrairement à l'animation CSS @property.
   Tout dérive de --accent via color-mix pour suivre le cycle. */
:root {
  --bg-base:     #0a0a0c;
  --bg-surface:  #111116;
  --bg-elevated: #18181f;
  --bg-overlay:  #22222c;
  --bg-card:     #16161c;

  --accent:      #d946ef;
  --accent-dim:  color-mix(in srgb, var(--accent) 12%, transparent);
  --accent-glow: color-mix(in srgb, var(--accent) 35%, transparent);
  --accent-dark: color-mix(in srgb, var(--accent) 72%, black);

  --text-1:      #f0f0f4;
  --text-2:      #9898a8;
  --text-3:      #4a4a5a;
  --text-accent: var(--accent);

  --border:       rgba(255, 255, 255, 0.055);
  --border-med:   rgba(255, 255, 255, 0.10);
  --border-hover: color-mix(in srgb, var(--accent) 35%, transparent);

  --r-sm:  6px;
  --r-md:  10px;
  --r-lg:  16px;
  --r-xl:  24px;

  --font-display: 'Syne', sans-serif;
  --font-body:    'DM Sans', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

  --shadow-sm:     0 1px 4px rgba(0,0,0,0.5);
  --shadow-md:     0 4px 20px rgba(0,0,0,0.55);
  --shadow-lg:     0 12px 48px rgba(0,0,0,0.7);
  --shadow-accent: 0 0 60px color-mix(in srgb, var(--accent) 18%, transparent);

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --t:    200ms;
  --t-lg: 400ms;
}