/*
 * Design tokens — myGymSoftware frontend modernization
 * Added by the frontend modernization project (see mygymsoftware/changelog/CHANGELOG.md).
 * Mirror of new_Soft_v2/css/design-tokens.css — kept as a separate copy because this login theme
 * (newSoft) is an independent template folder from new_Soft_v2, used only by index.php. If the token
 * values ever change, update both copies and note it in the changelog.
 */

:root {
  /* ---- Brand (kept from the existing app identity, systematized into a full scale) ---- */
  --brand-50:  #fef1f6;
  --brand-100: #fde2ee;
  --brand-200: #fbc0da;
  --brand-300: #f593bd;
  --brand-400: #ee5c9c;
  --brand-500: #eb4886; /* existing brand pink/magenta — #EB4886 */
  --brand-600: #d02d6c;
  --brand-700: #ab1f57;
  --brand-800: #8a1c49;
  --brand-900: #741b40;

  /* ---- Neutrals (cool gray, Stripe/Linear-style) ---- */
  --gray-0:   #ffffff;
  --gray-50:  #f8f9fb;
  --gray-100: #f1f3f6;
  --gray-200: #e6e9ef;
  --gray-300: #d5dae3;
  --gray-400: #b0b8c4;
  --gray-500: #8992a3;
  --gray-600: #667085;
  --gray-700: #475066;
  --gray-800: #2d3448;
  --gray-900: #191d2b;

  /* ---- Semantic ---- */
  --color-success-500: #17b26a;
  --color-warning-500: #f79009;
  --color-danger-500:  #f04438;
  --color-info-500:    #2e90fa;

  /* ---- Surfaces & text ---- */
  --surface-page:    var(--gray-50);
  --surface-card:     var(--gray-0);
  --text-primary:     var(--gray-900);
  --text-secondary:   var(--gray-600);
  --text-muted:       var(--gray-500);
  --border-default:   var(--gray-200);
  --border-strong:    var(--gray-300);

  /* ---- Typography ---- */
  --font-sans: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  --text-xs:   12px;
  --text-sm:   13px;
  --text-base: 14px;
  --text-md:   15px;
  --text-lg:   17px;
  --text-xl:   20px;
  --text-2xl:  24px;

  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  /* ---- 8px spacing scale ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;

  /* ---- Radius ---- */
  --radius-sm:  6px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-pill: 999px;

  /* ---- Shadow ---- */
  --shadow-sm: 0 1px 3px rgba(25, 29, 43, 0.08), 0 1px 2px rgba(25, 29, 43, 0.04);
  --shadow-lg: 0 20px 40px rgba(25, 29, 43, 0.18), 0 6px 12px rgba(25, 29, 43, 0.08);
  --shadow-focus: 0 0 0 3px rgba(235, 72, 134, 0.25);

  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --duration-fast: 120ms;
  --duration-base: 180ms;
}