/* Sylvestre UI — design tokens (valeurs exactes du handoff). */
:root {
  /* Accent (vert équilibré) */
  --accent: #4CCB63;
  --accent-hover: #62D977;
  --accent-press: #3CB158;
  --accent-soft: rgba(76, 203, 99, 0.10);
  --text-on-accent: #04150b;
  /* Cadre d'icône neutre (décor discret, façon bouton secondaire) */
  --icon-frame: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.035));

  /* Surfaces & fonds */
  --bg-base: #050505;
  --surface-card: #0f0f0f;
  --surface-inset: #000000;

  /* Texte */
  --text-primary: #fafafa;
  --text-secondary: #a8a8a8;
  --text-tertiary: #7c7c7c;

  /* Bordures */
  --border-subtle: rgba(255, 255, 255, 0.07);
  --border-default: rgba(255, 255, 255, 0.12);
  --border-accent: rgba(76, 203, 99, 0.35);

  /* États */
  --success: #5fe06b;
  --warning: #ffc452;
  --danger: #ff6b5e;
  --info: #5bb8ff;

  /* Fond de page signature */
  --app-gradient:
    radial-gradient(55% 45% at 84% -4%, rgba(76, 203, 99, 0.07) 0%, rgba(76, 203, 99, 0) 60%),
    radial-gradient(50% 50% at 6% 4%, rgba(12, 81, 40, 0.15) 0%, rgba(12, 81, 40, 0) 60%),
    #050505;

  /* Typographie */
  --font-display: 'Syne', 'Inter', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Layout */
  --container: 1200px;
  --gutter: clamp(20px, 4vw, 48px);

  /* Rayons */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-2xl: 36px;
  --radius-pill: 999px;

  /* Hauteurs de contrôle */
  --control-sm: 36px;
  --control-md: 44px;
  --control-lg: 56px;

  /* Ombres */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.6);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.6);
  --shadow-xl: 0 28px 70px rgba(0, 0, 0, 0.7);

  /* Glows accent (CTA / focus uniquement) — atténués */
  --glow-sm: 0 0 16px rgba(76, 203, 99, 0.18);
  --glow-md: 0 0 26px rgba(76, 203, 99, 0.24);
  --glow-lg: 0 0 44px rgba(76, 203, 99, 0.26);
  --glow-text: 0 0 16px rgba(76, 203, 99, 0.30);
  --ring-accent: 0 0 0 3px rgba(76, 203, 99, 0.40);

  /* Motion */
  --dur-fast: 140ms;
  --dur-base: 220ms;
  --dur-slow: 360ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}