/* ==========================================================================
   Gymspiratie — Design tokens (gedeeld)
   Afgeleid van het Gymspiratie design system: friendly blauw + warme CTA-rood
   op sky-blue/wit. Poppins (display) + Inter (body). Zachte, gelifte kaarten.
   Wordt als dependency ingeladen door de lesson-builder en gedeelde-lessen CSS.
   ========================================================================== */

:root {
	/* ---- Brand blauw (primair) ---------------------------------------- */
	--gym-blue-50:  #eaf4f8;
	--gym-blue-100: #d6e8f3;
	--gym-blue-200: #b3d4ea;
	--gym-blue-500: #2680c2;  /* PRIMAIR — bouwen, links, accenten */
	--gym-blue-600: #1f6aa3;
	--gym-blue-700: #1e5172;  /* deep — koppen, favoriet-knop */
	--gym-blue-800: #173f5a;
	--gym-blue-900: #122b46;  /* navy — titels */

	/* ---- CTA rood (de één belangrijke actie: delen) ------------------- */
	--gym-red-50:   #fdecec;
	--gym-red-500:  #f82929;
	--gym-red-600:  #e60808;

	/* ---- Coral (slot-accent) ------------------------------------------ */
	--gym-coral-50:  #fef0ef;
	--gym-coral-400: #f97e76;
	--gym-coral-700: #c0504a;

	/* ---- Groen (kern-accent / success) -------------------------------- */
	--gym-green-50:  #eef7ee;
	--gym-green-500: #6cb96c;
	--gym-green-600: #4e9e4e;
	--gym-green-700: #3f7a3f;

	/* ---- Amber (in behandeling / update beschikbaar) ------------------ */
	--gym-amber-50:  #fef3c7;
	--gym-amber-500: #f0a93a;  /* fill — update-badge, waarschuwing */
	--gym-amber-600: #b8860b;
	--gym-amber-700: #92400e;  /* tekst op amber-fill */
	--gym-amber-800: #854d0e;

	/* ---- Danger (fout / verwijderen / vol) ---------------------------- */
	--gym-danger-50:  #fef2f2;
	--gym-danger:     #ef4444;
	--gym-danger-600: #dc2626;
	--gym-danger-700: #991b1b;

	/* ---- Neutralen ---------------------------------------------------- */
	--gym-white:    #ffffff;
	--gym-gray-25:  #f8fafc;
	--gym-gray-50:  #f4f6f8;
	--gym-gray-100: #e9eef3;
	--gym-gray-200: #dce3ea;  /* hairline borders */
	--gym-gray-300: #c3ccd6;
	--gym-gray-400: #9aa7b4;
	--gym-gray-500: #6b7886;  /* secundaire tekst */
	--gym-gray-700: #374350;  /* body */
	--gym-gray-900: #16202b;

	/* ---- Rollen ------------------------------------------------------- */
	--gym-text-strong: var(--gym-blue-900);
	--gym-text-heading: var(--gym-blue-700);
	--gym-text-body:   var(--gym-gray-700);
	--gym-text-muted:  var(--gym-gray-500);
	--gym-surface:     var(--gym-white);
	--gym-surface-sky: var(--gym-blue-50);
	--gym-surface-muted: var(--gym-gray-50);
	--gym-border:      var(--gym-gray-200);
	--gym-border-input: var(--gym-gray-300);

	--gym-brand:       var(--gym-blue-500);
	--gym-brand-hover: var(--gym-blue-600);
	--gym-cta:         var(--gym-red-500);
	--gym-cta-hover:   var(--gym-red-600);

	/* ---- Type --------------------------------------------------------- */
	--gym-font-display: 'Poppins', 'Segoe UI', system-ui, sans-serif;
	--gym-font-body:    'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;

	/* ---- Radii -------------------------------------------------------- */
	--gym-radius-xs:   3px;   /* pills / chips */
	--gym-radius-sm:   6px;   /* inputs, kleine knoppen */
	--gym-radius-md:   8px;   /* kaarten, knoppen */
	--gym-radius-lg:   14px;  /* modals, feature-kaarten */
	--gym-radius-pill: 999px;

	/* ---- Shadows ------------------------------------------------------ */
	--gym-shadow-xs:   0 1px 2px rgba(18, 43, 70, 0.06);
	--gym-shadow-sm:   0 2px 6px rgba(18, 43, 70, 0.08);
	--gym-shadow-card: 0 3px 6px rgba(0, 0, 0, 0.10), 0 10px 20px rgba(0, 0, 0, 0.07);
	--gym-shadow-lift: 0 13px 16px rgba(0, 0, 0, 0.10), 0 20px 30px rgba(0, 0, 0, 0.12);
	--gym-shadow-pop:  0 5px 10px rgba(0, 0, 0, 0.05), 0 15px 25px rgba(0, 0, 0, 0.15);

	/* ---- Focus ring --------------------------------------------------- */
	--gym-ring: 0 0 0 3px color-mix(in srgb, var(--gym-blue-500) 35%, transparent);

	/* ---- Motion ------------------------------------------------------- */
	--gym-ease:     cubic-bezier(0.22, 0.61, 0.36, 1);
	--gym-dur-fast: 0.15s;
	--gym-dur-base: 0.3s;
}